Google Chrome 不允许 YouTube 的 iframe 高度答案

【问题标题】：Google Chrome Doesn't Allow Height on iframe for YouTubeGoogle Chrome 不允许 YouTube 的 iframe 高度
【发布时间】：2016-11-29 10:23:07
【问题描述】：

由于某种原因，我嵌入在我网站上的 YouTube 视频在 Chrome、Firefox 中没有高度，我也假设为 IE。奇怪的是，它在 Safari 中运行良好。我的网站是动态的，所以我将宽度设置为百分比。我已经为视频上的 src 尝试了 http://、https://、//www，没有做任何事情。还尝试将高度设置为自动，设置高度百分比，但这也不起作用。

.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%;
}

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

【问题讨论】：

我忘了添加我的网页是以 php 和 html 代码运行的，不知道这是否会有所不同。

标签： html css iframe youtube

【解决方案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%;
}

【讨论】：