检测到移动设备时不加载嵌入 iframe 的视频答案

【问题标题】：Not load video embedded with iframe when detect a mobile device检测到移动设备时不加载嵌入 iframe 的视频
【发布时间】：2013-08-17 08:49:58
【问题描述】：

在我的网页中，有一个嵌入视频 (vimeo) 的 iframe，其中包含一个全屏呈现视频的 jquery 脚本。

问题在于，在具有全屏视频的移动设备（特别是苹果设备）中，无法推送明显位于视频播放器上方的链接。

我的解决方案是使用 jquery 脚本隐藏视频

$('#vimeo').css('display', 'none');
$('#image_video').css('display', 'block');

并显示直接链接到 vimeo 页面的图像而不是视频。

通过这种方式，我想如果视频被隐藏，无论如何它都会在后台加载，对于移动互联网连接来说这是一种浪费。

我的问题是，有没有办法阻止加载 iframe？

我希望我自己解释了。对不起我的英语。

【问题讨论】：

【解决方案1】：

当我在托管服务提供商的客户控制面板中开发用于聊天的前端时，我遇到了类似的问题。

由于聊天本身是专有的，并且使用了 AJAX，我必须通过 iframe 访问它的 DOM，除非您在移动设备上。

我会像这样删除元素：

jQuery("#vimeo").remove();
jQuery("#image_video").css('display','block');

这样可以避免非标准属性，实际上只是从 DOM 中删除标签。

【讨论】：

【解决方案2】：

不要设置 iframe src，而是使用自定义数据属性，如

<iframe id="iframe1" data-src="http://...." />

如果你想加载它的内容，然后用 jQuery 设置 iframe src

  $('#iframe1').attr( 'src',  $('#iframe1').data('src')  );

或隐藏它

$('#iframe1').hide()

【讨论】：