Video YouTube toàn màn hình đáp ứng không có thanh màu đen?

Question

Tôi có video YouTube toàn màn hình được nhúng trên trang web của mình.

Nó có vẻ tốt khi kích thước của trình duyệt là tỷ lệ thuận với chiều rộng và chiều cao của video. Tuy nhiên, khi tôi đổi kích thước trình duyệt thành một tỷ lệ khác, tôi nhận được các thanh màu đen xung quanh video.

Những gì tôi muốn là phải có video lấp đầy toàn bộ cửa sổ bất cứ lúc nào, nhưng không có bất cứ kéo dài. Tôi muốn "vượt quá" để ẩn khi kích thước trình duyệt không tỷ lệ thuận với video.

Điều tôi đang cố gắng đạt được là điều bạn có thể thấy trong nền của hai trang web sau: http://ginlane.com/ và http://www.variousways.com/.

Có thể thực hiện việc này bằng video trên youtube không?

Answer 1

• Kiểm tra này: Fullscreen video without black borders
• Hoặc này: http://avexdesigns.com/responsive-youtube-embed/
• Hoặc cái này: http://css-tricks.com/fluid-width-youtube-videos/

Answer 2

này là khá cũ nhưng mọi người vẫn có thể cần giúp đỡ đây. Tôi cần này quá nên đã tạo ra một Pen của giải pháp của tôi mà nên giúp - http://codepen.io/MikeMooreDev/pen/QEEPMv

Ví dụ cho thấy hai phiên bản của cùng một video, người ta như là tiêu chuẩn và thứ hai cắt trực thuộc Trung ương liên kết để phù hợp với kích thước của phần tử cha mẹ đầy đủ mà không cho thấy những thanh màu đen ghê gớm.

Bạn cần sử dụng một số javascript để tính toán chiều rộng mới cho video nhưng thực sự dễ dàng nếu bạn biết tỷ lệ cỡ ảnh.

HTML

<div id="videoWithNoJs" class="videoWrapper"> 
    <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS - Chiều cao và chiều rộng o videoWrapper có thể bất cứ điều gì, họ có thể là tỷ lệ phần trăm nếu bạn rất muốn

.videoWrapper { 
    height:600px; 
    width:600px; 
    position:relative; 
    overflow:hidden; 
} 

.videoWrapper iframe { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

jQuery

$(document).ready(function(){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

này có thể cũng được kích hoạt trên thay đổi kích thước để đảm bảo nó vẫn đáp ứng. Cách dễ nhất (có lẽ không hiệu quả nhất) để thực hiện điều này là như sau.

$(window).on('resize', function() { 

    // Same code as on load   
    var aspectRatio = 1.78; 
    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 3

Thật đáng buồn này dường như không được làm việc .... Trừ khi tôi thiếu cái gì: http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 4

Tôi gửi bài này vì các câu trả lời trên là dành cho khi bạn có thanh màu đen ở trên cùng và ở dưới cùng. Nếu bạn có các thanh ở hai bên (trái và phải). Kịch bản này sẽ xử lý hai kịch bản.

var vidRatio = vidWidth/vidHeight; 
var wrapperHeight = $('#videoIFrameContainer').height(); 
var wrapperWidth = $('#videoIFrameContainer').width(); 
var wrapperRatio = wrapperWidth/wrapperHeight; 
if(wrapperRatio < vidRatio){ 
    var newWidth = wrapperWidth * (vidRatio/wrapperRatio); 
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'}); 

} 
else{ 
    var newHeight = wrapperHeight * (wrapperRatio/vidRatio); 
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'}); 

} 

Answer 5

Tôi đã dành rất nhiều thời gian để tìm hiểu điều này nhưng đây là giải pháp CSS đơn giản phù hợp với tôi khi sử dụng Flexbox. Về cơ bản, đặt video trong một container với vị trí tuyệt đối và chiều rộng và chiều cao 100% và làm cho nó hiển thị: flex và trung tâm nội dung!

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

Answer 6

Bạn cũng có thể sử dụng dưới đây: -

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe> 

Answer 7

Tạo một div container xung quanh mã iframe và cung cấp cho nó một lớp ví dụ:

<div class="video-container"><iframe.......></iframe></div> 

Thêm trong CSS :

.video-container { 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 

.video-container iframe, .video-container object, .video-container embed { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

coolestguidesontheplanet.com là URL nguồn của câu trả lời này.