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>

Answer 2

以下是使用CSS而不使用JavaScript的方法：

将您的iframe包裹在div中。
在div和iframe上方添加<input type='checkbox'>。
在<label>。

<input type='checkbox'>

使用<input type='checkbox'>隐藏display:none。
使用opacity:0或visibility:hidden *
添加此规则集：

input:checked + label + div {
      visibility: visible;
  }

* display:none和display:block也有效，但它有可能破坏布局。

以下代码段包含评论详情

段

＆＃13;

body {
  background: black;
}
#chx1 {
  display: none;
}
label {
  font-size: 40px;
  text-decoration: none;
  color: #fC3;
  cursor: pointer;
}
label:hover {
  color: #0ff;
}
/* This is the style of expanding div */

.expand {
  opacity: 0;
  height: 0;
  width: 480px;
  transition: opacity .4s, max-height 1s linear .3s;
}
/* This is the style of expanding div after checkbox is checked */

/* The :checked pseudo-class is associated to expanding div with adjacent sibling selectors */

#chx1:checked + label + .expand {
  opacity: 1;
  max-height: 270px;
}

＆＃13;

<!--Make sure the checkbox has an id-->
<input id='chx1' type='checkbox'>

<!--Make sure the label has a for that 
has the same value as checkbox id value-->
<label for='chx1'>✦</label>

<!--This is the expanding div that wraps around iframe-->
<div class='expand'>

  <!--This is your Youtube iframe inside of expanding iframe-->
  <iframe width="480" height="270" src="http://www.youtube.com/embed/o0u4M6vppCI" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

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

2 个答案:

段