Question

出于某种原因，我在我的网站上嵌入的YouTube视频在Chrome，Firefox和我也没有使用IE浏览器的高度。奇怪的是它在Safari中工作得很好。我的网站是动态的，所以我将宽度设置为百分比。我已经尝试了http：//，https：//，// www用于视频上的src，并没有做任何事情。也尝试高度为自动，设置高度的百分比，这也不起作用。

＆＃13;

.video-container {
  padding-bottom: 56.25%;
  padding-top: 10px;
  height: 0;
  margin-bottom: -60px;
  text-align: center;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: center;
  width: 80%;
  height: 80%;
}

＆＃13;

<div class="video-container">
  <iframe src="http://www.youtube.com/embed/yGqXk5AHSRg" allowfullscreen></iframe>
</div>

＆＃13;

Answer 1

它有效（我找到了你复制这些样式的页面，它们适用于我）：

https://jsfiddle.net/tobyl/0vx4upa1/

.video-container {
    position:relative;
      padding-bottom:56.25%;
      padding-top:30px;
      height:0;
      overflow:hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
}

谷歌浏览器不允许在YouTube上使用iframe

1 个答案: