Question

第一次发布海报，期待参与其中。

我正在尝试将来自私人托管服务（我为大学工作）的视频嵌入到我们的网站中，但我无法将其视为具有响应能力。与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>

然而，这只是在这里工作。我找不到编辑嵌入代码的方法，但在任何可以使用它的地方找不到任何提示。如果有人有任何想法，我将非常感激！

Answer 1

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

http://fitvidsjs.com/

Answer 2

我用CSS做到了。对于我的用途（在响应式网站上嵌入来自Vimeo的视频），这在我测试过的浏览器中非常有用：

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

它不需要图像占位符，所以它非常简单。

使嵌入式视频响应

2 个答案: