Замените содержимое divs для мобильных устройств

Im, используя сценарий jquery (трубчатый), который позволяет вам добавлять видео на YouTube на фоне страницы, прикрепляя основную оболочку в div.Замените содержимое divs для мобильных устройств

Видео в фоновом режиме не воспроизводится на мобильном устройстве, как вы знаете, поэтому страница не отображает права, я ищу способ обмена или замены оболочки для другой оболочки для видео не будет воспроизводиться, когда мобильный телефон обнаружено. Думаю, я могу использовать медиа-запрос для размера (min-width: 765, скажем).

JQuery прикрепляется к обертке ниже:

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

(содержание продолжает здесь) ..

Таким образом, в идеале, когда мобильный (или размер экрана < 765) обнаружен своп occors к:

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

(такое же содержание продолжается здесь, как указано выше, без видео в фоновом режиме. Так что в принципе div поменялся на мобильный. Я понимаю, что когда jquery видит id: wrapper, он начинает играть, поэтому мне нужно его поменять. спасибо заранее .. это может быть просто, но у меня есть время.

источник

2013-11-11 user2544442

Я разместил резервное изображение в теле сайта, определил идентификатор видео как атрибут данных в существующем div на странице, и я решил не определять div в моем трубчатом вызове, чтобы он создал свой собственный div, но вы заменили бы #tubular-container тем, что у вас есть, что держит видео. Затем я решил использовать метод медиа-запросов, который вы упомянули.

CSS

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

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

Хотя я предпочитаю, чтобы скрыть мое с помощью CSS, вы, вероятно, также использовать сценарий обнаружения мобильных и скрыть DIV с помощью JavaScript, например:

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

Я бы предпочел, чтобы в качестве плагина использовался встроенный плагин, что обнаруживает, что автовоспроизведение отключено и вместо этого использует резервное изображение, но это мое обходное решение.

источник

2014-08-31 01:05:50 testing123

Замените содержимое divs для мобильных устройств

ответ

Смежные вопросы