html - 设置嵌入式 youtube 视频的宽度

Question

我创建了自己的定制视频库。它可以显示 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>';

(增加宽度)，但不起作用。

我该如何解决这个问题？

提前致谢

Answer 1

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

显然，添加 class="youtube-player" type="text/html"在我的 <iframe>代码就可以了。它将使用 html5 或 fallback 来 flash，它会根据观看环境修改视频。检查this出。

然后，为什么当我在 youtube 上，点击视频下方的“嵌入”时，iframe代码不包含此:class="youtube-player" type="text/html" ？如果是如此“神奇”，为什么默认情况下不存在而且我必须添加它？不管怎样……