设置嵌入的 youtube 视频的宽度答案

【问题标题】：set the width of an embedded youtube video设置嵌入的 youtube 视频的宽度
【发布时间】：2013-11-17 01:45:09
【问题描述】：

我创建了自己的定制视频库。它可以显示 html5 视频和 youtube 视频。视频会根据用户点击的内容动态加载。

一开始我有

var elemv = document.createElement("video");
elemv.setAttribute("width", "70%");
elemv.setAttribute("controls", "true");
elemv.setAttribute("type","application/x-shockwave-flash");

然后，我使用 websockets 从数据库中获取视频的路径。我用它们创建了一个数组。例如，当用户单击“下一步”时，我将下一个数组项加载到 div 中

//if html5 video

    {document.getElementById("videogal").innerHTML=' ';
           //get the next source and then load it
         elemv.src=mplv[i];
        document.getElementById("videogal").appendChild(elemv);     
        }

//if youtube link

     document.getElementById("videogal").innerHTML='<object id="viewer" >'+mplv[i]+'</object>';

这使得在同一个画廊中拥有 youtube 和 html5 视频成为可能。所有的 youtube 链接都像 <iframe width="640" height="360" src="//www.youtube.com/embed/LIS2uZ8a9YQ" frameborder="0" allowfullscreen></iframe>。宽度始终为640

问题：

在我的代码开始时，我设置了"width", "70%"。这仅适用于 html5 视频，关于如何使其适用于 youtube 视频的任何建议？

我试过了 document.getElementById("videogal").innerHTML='<object id="viewer" width= "70%;" >'+mplv[i]+'</object>';

（增加宽度），但不起作用。

我该如何解决这个问题？

提前致谢

【问题讨论】：

您是否检查过元素以查看是否应用了宽度或忽略了宽度？
@user2954995 Firebug 说宽度是 70%。根据这个http://stackoverflow.com/questions/2680409/changing-object-height-and-width-works-in-chrome-but-not-firefox-or-ie-why 我必须在<iframe> 代码中设置width="70%"。它有效。随屏幕调整大小。我想要他的响应式设计。但从美学上看仍然不好看。那么，是否有从 youtube 创建拇指的指南？碰巧知道吗？谢谢
@user2954995 另外，关于我原来的问题 Chrome 说The value "device-width" for key "width" is invalid, and has been ignored。它存在错误，我无法单击它，因此我可以转到正确的代码位置...

标签： html css youtube

【解决方案1】：

我想要一个“灵活”的宽度来在所有设备和浏览器中实现响应式设计。

显然，在我的 <iframe> 代码中添加 class="youtube-player" type="text/html" 就可以解决问题。它将使用 html5 或回退到 flash，它会根据观看环境修改视频。签出this。

那么，为什么当我在 youtube 中点击视频下方的“嵌入”时，iframe 代码不包含以下内容：class="youtube-player" type="text/html"？如果是如此“神奇”，为什么默认不存在我必须添加它？总之.....

【讨论】：