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

Question

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

我该如何解决？

这是我用于 YouTube 视频边框的 CSS:

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

Answer 1

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

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

或者，您始终可以编写自己的简单 jQuery 函数 (see fiddle here):)

$(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();
});

限制或消除调整大小功能 (see link here) 可能是个好主意，因为当同一页面上有太多视频并且调整页面大小时，您将触发一连串的 resize()这肯定会对浏览器性能产生影响。