显示带有 iframe 页面全宽的 YouTube 视频 [英] Displaying a YouTube video with iframe full width of page

问题描述

我使用 YouTube 中的 iframe 将视频放入我的网站，而 iframe 是全宽 (100%)视频在帧内非常小(高度).如何使它适合容器的宽度?

代码:

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

看截图

解决方案

要使 You Tube Video 全宽并保持高度(并保持响应)，您可以使用以下设置.

.videoWrapper {位置:相对；填充底部:56.25%；/* 16:9 */填充顶部:25px；高度:0；}.videoWrapper iframe {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

<!-- 复制 &粘贴自 YouTube --><iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>

I've put a video in my site using an iframe from YouTube, while the iframe is full width (100%) the video is very small (height) within the frame. How do I make it fit the width of the container?

Code:

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

See screenshot

解决方案

To make a You Tube Video full width and preserve the height (and keep it responsive) you can use the following setup.

.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>

这篇关于显示带有 iframe 页面全宽的 YouTube 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！