0

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

如您所知，背景中的视频无法在移动设备上播放，因此页面无法正确呈现，我正在寻找一种方法来交换或替换包装器，因为当检测到移动设备时，视频将无法播放。我想我可以使用媒体查询来获取大小（比如说，最小宽度：765）。

jquery 附加到下面的包装器：

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

（内容在这里继续）..

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

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

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

4

1 回答 1

0

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

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(); 
}

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

于 2014-08-31T01:05:50.823 回答