HTML5 видео соответствует экрану пользователя 100%

Question

Я пытаюсь сделать видеоэлемент полноразмерной и «полноэкранной» и реагировать в одно и то же время.

В принципе, я не хочу использовать полноэкранный api, я просто хочу, чтобы видео соответствовало экрану пользователя, независимо от того, на каком экране размера они посещают сайт. Я сделал видео полноразмерное, единственное проблема в том, что высота слишком велика.

Вот довольно простой код:

<video id="bgvid" width="100%" height="" autoplay loop poster=""> 
      <source src="video.webm" type="video/webm" /> 
      <source src="video.mp4" type="video/mp4" /> 
</video> 

Как я уже говорил это, заставляя его идти всю ширину, но больше, чем весь экран из-за высоты.

Answer 1

Я предлагаю вам контролировать это с помощью JavaScript. Вы можете получить ширину и высоту с помощью следующего кода

width = $(window).width(); 
height = $(window).height();  
document.getElementById('widthID').innerHTML=width; 
document.getElementById('heightID').innerHTML=height; 

Вы можете использовать выше код в приложении

Answer 2

dosn't эта работа ?:

<video id="bgvid" width="100%" height="100%" autoplay loop poster=""> 
     <source src="video.webm" type="video/webm" /> 
     <source src="video.mp4" type="video/mp4" /> 
</video> 

ширина = "100%" высота = "100%"

Answer 3

Вы всегда можете установить его так, что пользователь может выбрать размер видео сами. Нравится

<div style="text-align:center"> 
<button onclick="makeBig()">640px - Normal</button> 
<button onclick="makeNormal()">420px - Small</button> 
<button onclick="makeSmall()">320px - Smaller</button> 
<br> 
<video id="video1" width="100%" controls> 
<source src="mov_bbb.mp4" type="video/mp4"> 
<source src="mov_bbb.ogg" type="video/ogg"> 
Your browser does not support HTML5 video. 
</video> 
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function makeBig() { 
myVideo.width = 640; 
} 

function makeSmall() { 
myVideo.width = 320; 
} 

function makeNormal() { 
myVideo.width = 420; 
} 
</script>