显示带有 iframe 页面全宽的 YouTube 视频

Question

我使用来自 YouTube 的 iframe 在我的网站上放了一个视频，而 iframe 是全宽（ 100% ）视频很小（他框架内。如何使它适合容器的宽度？

代码：

 <iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

看截图

原文由 user2953989 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要使 You Tube 视频全宽并保持高度（并保持响应），您可以使用以下设置。

 .videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 <div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

原文由 Web Develop Wolf 发布，翻译遵循 CC BY-SA 4.0 许可协议