溢出：隱藏的HTML5視頻

我想隱藏包裝在容器中的HTML5視頻的溢出。但是Firefox和Chrome仍然有滾動條。當我嘗試在Jsfiddle中重新創建問題時，它工作正常（沒有滾動條），但firefox或chrome中的相同代碼創建滾動並且不隱藏任何溢出。溢出：隱藏的HTML5視頻

任何想法如何讓HTML5視頻的溢出隱藏，以及爲什麼它不起作用？ PS。我曾試圖改變容器各種事物的位置，並嘗試打破overflow: hidden到overflow-x和overflow-y

<div class="video_container"> 
<video autoplay loop controls muted="true"class="video_window"> 
    <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 
</div>

CSS

.video_container{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -100; 
    overflow:hidden 

} 

video{ 
     position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 

} 


@media (min-aspect-ratio: 16/9) { 
    video { 
    height: 300%; 
     top: -100%; 
    } 
} 

@media (max-aspect-ratio: 16/9) { 
    video{ 
    width: 300%; 
    left: -100%; 
    } 
}

來源

2016-08-23 auto

這一個應該做的伎倆，如果你的意思是那些煩人的酒吧與在您的DIV上滾動元素。設置爲你的包裝元素（例如.video_container）

&::-webkit-scrollbar { 
    display: none; 
}

來源

2016-08-23 16:19:52 Evgeny

謝謝，但不幸的是，這並沒有解決我的問題。在Chrome和Firefox中，當我更改窗口大小/寬度時，滾動仍處於啓用狀態。 – auto

我剛剛在我的OS X（Mac）上測試了Chrome和FF，它不會給我任何滾動條..你是Windows/Linux嗎？ – Evgeny

啊，我刪除了位置：絕對從容器中，它似乎工作正常！謝謝！ – auto

溢出：隱藏的HTML5視頻

回答

相關問題