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）可能是一个好主意，因为当您在同一页面上有太多视频并且调整页面大小时，您将触发一系列调整大小（）肯定会对浏览器性能产生影响。

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>

如何在一帧中制作响应式视频？

2 个答案: