自动调整嵌入视频的大小答案

【问题标题】：Auto re-sizing embedded videos自动调整嵌入视频的大小
【发布时间】：2015-07-12 15:29:04
【问题描述】：

我在这个网站和许多其他网站上进行了研究，并尝试了 fivid.js 和自定义 css 和 js 等解决方案，但都没有解决我的问题。我想为网站上现有的 youtube 视频找到一个简单的解决方案，以根据屏幕大小调整大小。

我认为问题可能在于大多数现有的 youtube 视频都是通过以下方式嵌入的：

<p align="center"> 
<object width="800" height="450"><param name="movie" value="http://www.youtube.com/v/ETLV4nz5xCI?list=UURoUPTn7sfJkIl6Md5XKkwg&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ETLV4nz5xCI?list=UURoUPTn7sfJkIl6Md5XKkwg&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen" type="application/x-shockwave-flash" width="800" height="450" allowscriptaccess="always" allowfullscreen="true"></embed></object>

我怎样才能使以这种方式编码的网站上的任何视频都根据屏幕尺寸重新调整大小？

编辑：该网站有多个页面（它是一个电子商务网站），每个产品都有自己的视频，大约有 2 万个产品。大多数视频都像上面的代码一样编码，我想知道他们是否可以像fitvid 这样自行调整大小，因为我无法浏览所有 2 万种产品并自己重做代码.我也很好奇 youtube 视频的编码方式是否可行。

【问题讨论】：

标签： javascript css video youtube

【解决方案1】：

好吧，我们知道 object 和 embed 已被弃用，更好地与 iframe 一起使用。下面的 sn-p 代码允许根据浏览器大小调整视频大小。

这是工作代码：

<!DOCTYPE html>
<html>
<body>

<iframe frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%",
src="http://www.youtube.com/v/ETLV4nz5xCI?list=UURoUPTn7sfJkIl6Md5XKkwg&amp">
</iframe>

</body>
</html>

希望对你有帮助:)

【讨论】：

您好，谢谢，我该怎么做才能影响网站上所有现有的 youtube 视频，例如，如果有几百个视频以这种类似的方式嵌入？
看看我们可以在一个网页中插入多个 iframe...现在您要做的就是创建一个响应式设计网页创建您的完整布局，无论您想在哪里显示视频，只需插入上面的代码...您将看到上面的 sn-p 代码不包含任何硬编码 css，因此它将从其父级获取高度宽度...
我想我可能会让你感到困惑，请允许我澄清一下。我有一个包含多个页面的网站（它是一个电子商务网站），每个产品都有自己的视频，大约有 2 万种产品。大多数视频的编码都像描述中一样，我想知道是否有一种方法可以像fitvid 一样自行调整大小，因为我无法浏览所有 2 万种产品并自己重做代码.我也很好奇 youtube 视频的编码方式是否可行？
我不介意发布网站，但您是否只想嵌入 youtube 的源代码？无论如何这里是特定页面的源代码，大多数页面看起来类似于此视图源：shoppmlit.com/…
不错的网站...将通过它并返回给您... :)