javascript - 如何使 Youtube 嵌入式视频响应

Question

示例网站:http://zh.gopro.com/

可以看出，标题 youtube 视频是响应式的(窗口调整大小时自动调整大小)，<iframe>代码如下:

<iframe id="bluetube-player-1" frameborder="0" allowfullscreen="1" title="YouTube video player" width="944" height="531" src="https://www.youtube.com/embed/F1jpCBPiWS4?showinfo=0&amp;rel=0&amp;controls=0&amp;modestbranding=0&amp;wmode=transparent&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fzh.gopro.com" style="width: 1125px; height: 633px; left: 0px; top: -158.5px; position: relative;">

</iframe>

我找到了 width , height和 style此页面中的属性都是响应式的。但我没有找到作者是如何做到这一点的(css 或 js？)。我试图通过使用 bluetube 找到 jQuery 方法。搜索但仍然不明白它是如何工作的..

有人对此有想法吗？

Answer 1

您的示例网站上的视频实际上没有响应，它没有根据您的窗口正确调整大小(两侧只是被剪裁)。一旦窗口小于特定宽度(很可能针对移动设备)，他很可能只是使用媒体查询来调整视频大小。

但是，如果您使用具有固有宽高比的容器元素，那么您想要实现的实际上是可能的，然后将视频绝对定位在其中。

HTML

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <!-- The width and height here are ignored, and can actually be removed -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ygVQ8R-ZtZA" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JSFiddle demo

可以找到有关响应式视频嵌入的来源和更多信息 here .