将youtube iframe放在另一个图标关闭的框架上

Question

如何将iframe youtube放在图标关闭的框架上.示例: - 如果我想将iframe放在框架上,图标关闭,如果我点击图标关闭iframe youtube将消失,我该怎么办？

<iframe width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>

谢谢

Answer 1

我不确定这是否是您所期望的 100%，但我希望对您有所帮助。

$(".button").click(function() {
  $("#x").addClass('hide');
});

.frame {
  height: auto;
  width: auto;
  padding: 20px;
  border: 1px solid black;
  position: relative;
}
.button {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  width: 20px;
  background-color: black;
  color: white;
}
.content {
  display: block;
}
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
  <button class='button'>X</button>
  <iframe id='x' class='content' width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>
</div>