Сделать видеоподходящим на 100% с любым разрешением экрана

Question

У меня есть видео со следующими характеристиками: Рама ширина: 1920 и Высота рамки: 1080. Мне нужно, чтобы ее ширина и высота составляли 100%, тем самым заполняя весь экран. И он также должен быть отзывчивым. До сих пор, у меня есть этот код:

<video class="hidden-xs hidden-sm hidden-md hidden-custom videosize embed-responsive-item" autoplay="autoplay" loop="loop"> 
    <source src="~/Videos/myvideo.mp4" type="video/mp4" /> 
</video> 

CSS:

.videosize { 
    position:absolute; 
    z-index:-1; 
    top:0; 
    left:0; 
    width:100%; 
    height:100vh; 
} 

С кодом выше он прекрасно вписывается с разрешением 1680 х 1050 экрана, однако с другим разрешением, он принимает до 100% высота, затем ширина регулируется, оставляя белые пространства с обеих сторон.

Любая идея? Благодарю.

Answer 1

Найдено хорошее решение здесь: http://codepen.io/shshaw/pen/OVGWLG

Таким образом, ваш CSS будет:

.video-container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
.video-container video { 
    /* Make video to at least 100% wide and tall */ 
    min-width: 100%; 
    min-height: 100%; 

    /* Setting width & height to auto prevents the browser from stretching or squishing the video */ 
    width: auto; 
    height: auto; 

    /* Center the video */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

HTML:

<div class="video-container"> 
    <video> 
    <source src="~/Videos/myvideo.mp4" type="video/mp4" /> 
    </video> 
</div> 

Answer 2

Можете ли вы использовать iframe?

/* Flexible iFrame */ 
 
    
 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
    
 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe src="URL" frameborder="0" style="border:0"></iframe> 
 
</div>

Answer 3

Теперь вы можете использовать свойство объекта. Это свойство было разработано специально для управления отзывчивыми размерами для <img> и <video> элементов. Теперь он поддерживается всеми современными браузерами.

.videosize { 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}