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方法，但仍然不了解它是如何工作的。< / p>

有没有人有这方面的想法？

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。

如何使Youtube嵌入式视频响应

1 个答案:

HTML

CSS