顯示圖像，而不是在較小的屏幕

視頻我這裏有一個視頻：http://desertcinema.com/jheck/顯示圖像，而不是在較小的屏幕

凡有在播放短片。我用https://github.com/matthewhudson/device.js？（DEVICE.JS）將背景視頻更改爲平板電腦和iPhone等較小屏幕上的背景圖像。

這裏的一對，我的代碼：

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-圖像將持有FF：

.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工具來檢查這一點。

來源

2016-07-23 Kimberly Wright

有一種更美麗的方式來處理這與媒體查詢。

媒體查詢允許您添加一些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 
    */ 

} 
});

你能做到這一點的平板電腦也是如此。事實上，你可以確切地確定你想要的像素，這比使用已經存在的功能更強大。

來源

2016-07-23 11:07:38 Alburkerk

顯示圖像，而不是在較小的屏幕

回答

相關問題