Dopasuj wideo w 100% do dowolnej rozdzielczości ekranu.

Question

Mam wideo o następujących właściwościach, Szerokość ramki: 1920 i Wysokość klatki: 1080. Potrzebuję jej szerokości i wysokości, aby osiągnąć 100%, wypełniając cały ekran. I musi też reagować. Do tej pory mam ten kod:

<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; 
} 

W powyższym kodzie to doskonale pasuje do rozdzielczości ekranu 1680 x 1050, jednak z drugiej rozdzielczości, zajmuje 100% wysokość, a następnie szerokość dostosowuje się pozostawiając białe przestrzenie po obu stronach.

Każdy pomysł? Dzięki.

Answer 1

Znaleziono dobre rozwiązanie tutaj: http://codepen.io/shshaw/pen/OVGWLG

Więc CSS byłoby:

.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

Czy możesz użyć elementu 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

Możesz teraz użyć właściwości dopasowania obiektu. Ta właściwość została zaprojektowana specjalnie w celu zarządzania elastycznym rozmiarem elementów <img> i <video>. Jest teraz obsługiwany przez wszystkie nowoczesne przeglądarki.

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