html - 如何在框架中制作响应式视频？

Question

我正在开发客户网站的响应版本，我偶然发现了这个问题 - 当我缩小浏览器窗口时，youtube 视频没有居中 - padding-right: 10px; 被忽略 - 为什么？

我怎么能解决这个问题？

这是我用于 youtube 视频边框的 CSS：

padding: 10px;
position: relative;
overflow: hidden;

Answer 1

视频未正确调整大小的原因可能是由于您使用的嵌入代码，它通常指定<iframe>元素的确切尺寸，使其对布局更改或调整大小事件无响应。

有一个漂亮的 jQuery 插件可以做到这一点 - http://fitvidsjs.com/

或者，您始终可以编写自己的简单 jQuery 函数（请参见此处的小提琴）:)

$(document).ready(function() {
    var $w = $(window),
        $vids = $("iframe[src*='youtube'], iframe[src*='vimeo']");

    // Store video aspect ratio
    $vids.each(function() {
        var aspectRatio = $(this).width() / $(this).height();
        $(this).attr("data-aspect-ratio", aspectRatio);
    });

    $w.resize(function() {
        // Set video width fluidly
        $vids.each(function() {
           $(this).width($(this).parent().width()); 
           $(this).height(Math.floor($(this).width() / $(this).data("aspect-ratio")));
        });
    }).resize();
});

限制或消除调整大小功能可能是一个好主意（请参见此处的链接），因为当您在同一页面上有太多视频并且调整页面大小时，您将触发一系列 resize() 肯定会对浏览器性能有影响。

Answer 2

你为什么放overflow: hidden;？

使用 div 使元素居中，例如：

#video
{

    width: 300px;
    height: 250px;
}
#main_video
{
    padding: 10px;
    margin: 0 auto;
}

<div id="main_video">
<div id="video">
    [example]
</div>
</div>