移动iframe youtube查看试图下载而不显示视频

Question

我有以下代码适用于桌面但不适用于移动设备.代码显示一个图像,如果单击该图像,它将用iframe替换它,并保持分配给它的YouTube视频.

<img src="/image/background/ph_shop.jpg" alt="Shop Directions" class="video-placeholder img-force shadow-box pointer" data-video="https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1" />
<script>
     $(".video-placeholder").click(function(){
          var video = \'<iframe frameborder="0" class="width-100 shadow-box" height="400" src="\'+ $(this).attr(\'data-video\') +\'" allowfullscreen></iframe>\';
          $(this).replaceWith(video);
     });
</script>

当我尝试在移动设备中单击图像时,它会删除图像,但不会在其中加载任何内容,然后尝试下载无法打开的文件,名为"m8qcEilvdMQ&rel = 0&autoplay = 1"

Answer 1

我遇到了同样的问题并解决了它!

解决方案是更改您的YouTube视频网址.

用/v/你的网址替换/embed/.

例如,将您的网址https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1与https://www.youtube.com/embed/m8qcEilvdMQ&rel=0&autoplay=1

我不知道为什么" v"URL开始下载,我认为这是因为它返回带有content-type的标头application/x-shockwave-flash,并且embedURL返回内容类型text/html.