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＆amp; rel = 0＆amp; autoplay = 1”< / p>

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”网址开始下载，我认为这是因为它返回内容类型为application/x-shockwave-flash的标头，并且embed网址返回内容类型text/html。

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

1 个答案: