如何使 Youtube 嵌入式视频响应式答案

【问题标题】：How to make Youtube embeded video responsive如何使 Youtube 嵌入式视频响应式
【发布时间】：2015-02-05 18:27:39
【问题描述】：

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

有人对此有想法吗？

【问题讨论】：

您的示例网站上的视频实际上没有响应，它没有根据您的窗口正确调整大小。只有当窗口小于某个宽度（很可能针对移动设备）时，他才会使用媒体查询来调整视频大小。
@DarkAshelin 你的意思是他在css中使用@media (min-width: xxx)？如果是这样，为什么width、height和style属性会在调整视频大小时改变...
我没有详细研究您的示例网站上使用了哪些代码，但是如果您尝试调整窗口大小，您会看到如果您的窗口太小，视频的一部分将被剪辑。您将无法看到左右角发生了什么。这可能不是你想要的。
@DarkAshelin 其实这正是我所需要的.. 如果视频没有被剪辑，页面的顶部和底部会有难看的黑边..
既然您将其标记为 Bootstrap：getbootstrap.com/components/#responsive-embed

标签： javascript jquery css twitter-bootstrap-3 responsive-design

【解决方案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找到有关响应式视频嵌入的源代码和更多信息。

【讨论】：

其实这正是我所需要的。。如果视频没有被剪辑，在调整窗口大小时页面的顶部和底部会有难看的黑边......
您正在尝试的视频是否有黑边？