Показать изображения вместо видео на небольшом экране

Question

У меня есть видео здесь: http://desertcinema.com/jheck/

Где есть видео играет на спине. Я использовал https://github.com/matthewhudson/device.js? (DEVICE.JS), чтобы изменить фоновое видео на фоновое изображение на меньшем экране, таком как планшет и iphones.

вот мои коды на что:

if(!device.tablet() && !device.mobile()) { 

    jQuery(function(){ 

     jQuery("#bgndVideo").on("YTPStart", function(){ jQuery("#eventListener").html("YTPStart")}); 
     jQuery("#bgndVideo").on("YTPEnd", function(){ jQuery("#eventListener").html("YTPEnd")}); 
     jQuery("#bgndVideo").on("YTPPause", function(){ jQuery("#eventListener").html("YTPPause")}); 
     jQuery("#bgndVideo").on("YTPBuffering", function(){ jQuery("#eventListener").html("YTPBuffering")}); 

     jQuery("#bgndVideo").mb_YTPlayer(); 

    }); 

} else { 

    $('#bgimg').addClass('bg-image'); 

} 

Класс BG-изображение будет держать и далее:

.bg-image { 
    background:url('http://koowallpapers.com/wp-content/uploads/2013/08/new-york-city-streets-background.jpg'); 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -ms-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
    width: 100%; 
    height: 100%; 
    z-index: -1 !important; 
    backface-visibility: hidden; 
    background-position: center center; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow: hidden; 
} 

Но по какой-то причине, когда я изменить размер браузера по-прежнему отображается видео на маленьких экранах , Любая идея, что я делаю неправильно?

Чтобы проверить это, вы можете использовать инструмент INSPECT ELEMENT.

Answer 1

Существует более прекрасный способ справиться с этим со средствами массовой информации.

Медиа-запросы позволяют добавлять некоторые CSS-классы в классы с условиями размера экрана.

Например, вы можете написать:

@media (max-width : 762 px) { 
    #someID{ font-size : 14px; 
       other properties : other values; 
} 

Таким образом, вы можете обнаружить, когда экран является немного для вашего видео. Затем вы должны знать это свойство в своем javascript.

Таким образом, вы можете просто сделать следующий код:

$(document).ready(function() {  
var is_mobile = false; 


if($('#someID').css('display')=='none') { 
    is_mobile = true;  
} 

if (is_mobile == true) { 
    /* 
    /Add the script you want for mobile devices 
    */ 

} 
}); 

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