如何將html5視頻合併到橫幅中

正在爲需要適合橫幅的全寬和高度的橫幅中添加視頻。什麼我做的是遵循如何將html5視頻合併到橫幅中

的Html

<div class="banner"> 
    <video> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    </video> 
</div>

CSS：

video { 
    display: block; 
    width: 100%; 
    height: 566px; 
    z-index: -100; 

} 
.banner{ 
    width: 100%; 
    height: 566px; 
    background: red; 
    overflow: none; 

}

工作小提琴：Fiddle

但視頻不適合旗幟

來源

2016-09-16 Jothi Kannan

要顯示的紅色背景？ – Gowtham

是的，它需要充滿視頻:) –

你需要'高度'設置爲'566px'？如果你使它成爲'100％'或'auto'，它應該適合。 [檢查此]（http://fiddle.jshell.net/ypL0eym8/10/） –

使用object-fit: cover：

video { 
    display: block; 
    width: 100%; 
    height: 566px; 
    z-index: -100; 
    object-fit: cover; 
}

見JSFiddle

來源

2016-09-16 09:32:57

，但它只能在Chrome瀏覽器中工作，其餘瀏覽器看起來視頻已損壞。 –

@JothiKannan - 在我的FF上工作。沒有IE。 idk如何解決如果IE不能正常工作。 xD –

你看到它在FF中的工作，但視頻隱藏在底部它不像鉻一樣好 –

video { 
    display: block; 
    width: 100%; 
    height: 566px; 
    z-index: -100; 
    background: cover; 
    overflow: none; 
}

工作正常陳ge背景變成了「封面」。

http://fiddle.jshell.net/ypL0eym8/11/

**編輯**

NVM，採取this答案來代替。我不知道「物體適合」，它效果更好。

來源

2016-09-16 09:32:37

，但然後紅色部分消失。視頻不會填充到566px的高度 –

您需要設置寬度：自動;它解決您的問題

video { 
    display: block; 
    width: auto; 
    height: 566px; 
    z-index: -100; 

} 
.banner{ 
    width: 100%; 
    height: 566px; 
    background: red; 
    overflow: none; 

}

的js小提琴演示你不 http://fiddle.jshell.net/ypL0eym8/7/

來源

2016-09-16 09:34:34

如何將html5視頻合併到橫幅中

回答

相關問題