以全幅iframe显示YouTube视频 [英] Displaying a YouTube video with iframe full width of page

问题描述

我已使用YouTube上的 iframe 在我的网站中放置了一个视频，而 iframe 是全角的（ 100％）视频在框架内非常小（高度）。如何使其适合容器的宽度？

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?

代码：

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

查看屏幕截图

推荐答案

要使You Tube Video变宽并保持其高度（并保持其响应速度）您可以使用以下设置。

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

带有视频的HTML

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

CSS

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

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