Fatal编程技术网

Jquery mobile 为移动设备替换divs内容

jquery-mobile mobile video

Jquery mobile 为移动设备替换divs内容,jquery-mobile,mobile,video,background,swap,Jquery Mobile,Mobile,Video,Background,Swap,Im使用jquery脚本（管状），通过在div中附加主包装，可以在页面背景中添加youtube视频 背景中的视频无法在移动设备上播放，因此页面无法正确呈现。我正在寻找一种方法，以替换或替换包装，因为检测到移动设备时，视频将无法播放。我想我可以用媒体查询大小（比如最小宽度：765） jquery附加到下面的包装器： <body> <div id="wrapper"> //<- video starts here 100% width and height //

Im使用jquery脚本（管状），通过在div中附加主包装，可以在页面背景中添加youtube视频

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

jquery附加到下面的包装器：

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



// 我将回退图像放在站点主体中，将视频id定义为页面上现有div中的数据属性，并且我决定不在管状调用中定义div，这样它将创建自己的div，但您将用保存视频的div替换
#管状容器
。然后我决定使用你提到的媒体查询方法

CSS


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


JS

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


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


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


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



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