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或后备闪存，它将根据查看环境修改视频。检查this。

然后，为什么当我在youtube中，并点击视频下的“嵌入”时，iframe代码不包含此内容：class="youtube-player" type="text/html"？如果是如此“神奇”为什么不存在defualt并且我必须添加它？无论如何.....

设置嵌入式YouTube视频的宽度

1 个答案: