видео со 100% шириной на широкоэкранном экране

Question

Когда я устанавливаю ширину и высоту видеоизображения html5 на 100%, высота видео больше видимой области браузера и появляется вертикальная полоса прокрутки.

Это потому, что мое видео находится в формате 4: 3? Как изменить размер, чтобы заполнить все пространство без необходимости прокрутки страницы?

Спасибо за чтение!

Answer 1

Вам нужно будет проверить высоту окна браузера с помощью javascript и ограничить ваше видео меньше. Вот fiddle HTML:

<video id="vid1" controls> 
    <source src="movie.mp4" type="video/mp4" /> 
     <source src="movie.ogg" type="video/ogg" /> 
Your browser does not support the video tag. 
</video> 

CSS:

video { 
    width:100%; 
    height:100%; 
} 

Javascript:

window.onresize = function(event) { 
    var h=window.innerHeight; 
    document.getElementById("vid1").style.maxHeight=h+"px"; 
}