Question

我使用了一个jquery脚本（管状），它允许你通过在div中附加主包装器在页面背景中添加youtube视频。

背景中的视频无法在移动设备上播放，因为您知道页面无法正确呈现，我正在寻找一种方法来交换或替换包装器，以便在检测到移动设备时视频的其他包装器无法播放。我想我可以使用媒体查询大小（min-width：765，让我们说）。

jquery附加到下面的包装器：

 <body>
 <div id="wrapper"> //<- video starts here 100% width and height //

（内容在这里继续）..

因此，理想情况下，当检测到移动（或屏幕尺寸<765）时，交换发生于：

<body>
<div id="wrapper-mobile">

（相同的内容在上面继续，如上所述没有视频。所以基本上div被换成移动。希望我清楚..当jquery看到id：wrapper它开始播放所以我需要交换它。提前谢谢..这可能很简单，但我有时间。

Answer 1

我将后备图像放在网站的正文中，将视频ID定义为页面上现有div中的数据属性，我决定不在我的管状调用中定义div，因此它会创建自己的div ，但你可以用保存视频的div替换#tubular-container。然后我决定只使用你提到的媒体查询方法。

CSS

@media screen and (max-width:765px){
    #tubular-container {
        display: none;
    }
}

JS

var videourl = $('#video-div').data('videoid');
$('#video-div').tubular({videoId: videourl});

虽然我更喜欢使用CSS隐藏我的，但您可能还可以使用移动检测脚本并使用javascript隐藏div，例如：

if(isMobile()){ 
    $('#tubular-container').hide(); 
}

我更希望在插件中内置一个背景图像回退，这可以检测是否禁用自动播放并使用后备图像，但这是我的解决方法。