Tạo video phù hợp 100% với bất kỳ độ phân giải màn hình nào

Question

Tôi có video có các thuộc tính sau, Chiều rộng khung hình: 1920 và Chiều cao khung hình: 1080. Tôi cần chiều rộng và chiều cao của nó là 100%, do đó lấp đầy toàn bộ màn hình. Và nó cần phải được đáp ứng quá. Cho đến nay, tôi có mã này:

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

Với đoạn mã trên nó phù hợp một cách hoàn hảo với độ phân giải màn hình 1680 x 1050, tuy nhiên với độ phân giải khác, nó chiếm 100% chiều cao sau đó chiều rộng điều chỉnh để lại khoảng trắng trên cả hai mặt.

Bất kỳ ý tưởng nào? Cảm ơn.

Answer 1

Tìm thấy một giải pháp tốt ở đây: http://codepen.io/shshaw/pen/OVGWLG

Vì vậy, CSS của bạn sẽ là:

.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

Bạn có thể sử dụng iframe không?

/* 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

Bây giờ bạn có thể sử dụng thuộc tính phù hợp với đối tượng. Thuộc tính này được thiết kế đặc biệt để quản lý kích thước đáp ứng cho các thành phần <img> và <video>. Nó hiện được hỗ trợ bởi tất cả các trình duyệt hiện đại.

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