響應式視頻與CSS中的DIV衝突

我的頁面上有一個響應式視頻，當顯示器的寬度低於767像素（適用於智能手機）時，我已設置爲適應靜態背景圖像。響應式視頻與CSS中的DIV衝突

問題是，768像素到1199像素（寬度）之間的任何東西，例如。在iPad上，我的視頻DIV容器高度不響應，導致視頻下方出現白色邊緣。理想情況下，容器應該調整從266px - 347px（高度）與視頻高度/寬度平行。

.videobg是我的容器，.videoheader是視頻本身。

下面是代碼：

.videobg { 
margin:0; 
padding:0; 
width:100%; 
height:100%; 
position: static; 
z-index: -100; 
min-height: 250px; 
max-height: 423px; 
} 

.videoheader { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 

} 

@media (max-width: 767px) { 
    .videobg { 
     background: url('images/home/header.jpg') center center/cover no-repeat; 
     height:266px; 
    } 

    .videoheader { 
     display: none; 
    } 
} 


@media(max-width:768px){ 
.videobg { 
height:266px; 
    } 
} 

@media (max-width: 884px) { 
    .videobg { 
     height:280px; 
    } 
} 


@media (max-width: 1000px) { 
    .videobg { 
     height:347px; 
    } 
}

來源

2016-01-22 zalmah

除了css外，你能提供[MCVE]（http://stackoverflow.com/help/mcve）嗎？ – Green

另外，如果你正試圖使響應的視頻播放器，嘗試尋找這個：https://jsfiddle.net/tboyvk5p/ – Green

@Green - 肯定 - 你可以點擊此處查看：www.zalmah.com/newsite – zalmah

對於這種特定的情況下，它看起來該解決方案將是：

.videobg { 
    font-size: 0px; 
}

我強烈建議您使用其他比例爲響應視頻（例如like this），哦親愛的，這麼多媒體疑問！：D 但是，呃，如果它適合你，那就沒問題。

來源

2016-01-22 23:26:29 Green

響應式視頻與CSS中的DIV衝突

回答

相關問題