javascript - 移动 iframe youtube 查看尝试下载但不显示视频

Question

我有以下适用于桌面但不适用于移动设备的代码。该代码显示一张图片，如果单击该图片，它将替换为包含分配给它的 youtube 视频的 iframe。

<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/ .

例如，替换您的 URL https://www.youtube.com/v/m8qcEilvdMQ&rel=0&autoplay=1与 https://www.youtube.com/embed/m8qcEilvdMQ&rel=0&autoplay=1

我不知道为什么“v”URL 开始下载，我认为这是因为它返回内容类型为application/x-shockwave-flash 的 header 。 , 和 embed URL 返回内容类型 text/html .