如何使Youtube嵌入式视频具有响应能力

How to make Youtube embeded video responsive

本文关键字：响应 能力 视频 何使 Youtube 嵌入式      更新时间：2023-09-26

示例网站：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方法，但仍然不明白它是如何工作的。。

有人对此有想法吗？

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

然而，如果你使用一个具有固有纵横比的容器元素，那么你想要实现的实际上是可能的，然后将视频绝对定位在其中。

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演示

关于响应视频嵌入的来源和更多信息可以在这里找到。

相关文章：