使嵌入式视频响应答案

【问题标题】：making an embeded video responsive使嵌入式视频响应
【发布时间】：2013-07-23 18:24:24
【问题描述】：

第一次发帖，期待参与。

我正在尝试将来自私人托管服务（我在大学工作）的视频嵌入到我们的网站中，但无法使其响应。与 Youtube 或 Vimeo 视频不同，高度和宽度似乎在“src”中定义，如下所示：

<iframe width="640" height="385" src="http://videolibrary.sheffield.ac.uk/player?autostart=n&fullscreen=y&width=640&height=385&videoId=6432&quality=hi&captions=n" frameborder="0" scrolling="no"></iframe>

在使用以下 CMS（并将嵌入代码放在适当的 div 中）之前，我已经通过 Youtube 视频非常简单地解决了这个问题

    <style type="text/css">
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}</style>

但是这在这里不起作用。我找不到编辑嵌入代码的方法，也找不到任何与此相关的提示。如果有人有任何想法，我将非常感激！

【问题讨论】：

Shrink a Youtube video to responsive width的可能重复

标签： css iframe responsive-design embed

【解决方案1】：

我使用 CSS 来做到这一点。对于我的用途（在响应式网站上嵌入来自 Vimeo 的视频），这在我测试过的浏览器中效果很好：

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

它不需要图像占位符，因此非常简单。

【讨论】：

【解决方案2】：

我想这个用于流体宽度视频嵌入的 jQuery 插件可能会对你有所帮助，看看吧！

http://fitvidsjs.com/

【讨论】：

感谢您的提示，但不幸的是，除非我添加错误，否则这似乎没有任何作用。如果有什么它只是强制视频的尺寸并且页面的其余部分已经响应它，尽管查看细节我认为我使用的视频播放器不受支持。
有一个选项可以添加您自己的视频供应商。请查看github.com/davatron5000/FitVids.js 此处的文档了解更多详细信息。
这似乎仍然不起作用。它只是裁剪视频而不是调整大小。我预计这可能是由于视频源网址中的“&width=640&height=385”详细信息。如果我删除它，那么视频就会一起消失。