我在我的網站上嵌入了全屏YouTube視頻。響應式全屏YouTube視頻沒有黑條？
它看起來不錯，當瀏覽器的大小是成正比的視頻的寬度和高度。但是，當我將瀏覽器調整爲不同的比例時，視頻周圍出現黑條。
我要的是有聲視頻充滿整個窗口，在任何時候，但沒有任何拉伸。當瀏覽器大小與視頻不成比例時，我希望「多餘」隱藏。
我想要實現的是你可以在這兩個網站的背景中看到的東西：http://ginlane.com/和http://www.variousways.com/。
是否可以使用YouTube視頻做到這一點？
這是很老了，但人們可能仍然需要在這裏幫助。我需要這也因此創造了我的解決方案的筆，這應有助於 - http://codepen.io/MikeMooreDev/pen/QEEPMv
的例子顯示了同一個視頻的兩個版本，一個是標準，第二裁剪和中心對齊，以適應全父元素的大小沒有顯示可怕的黑色條。
您需要使用一些JavaScript來計算視頻的新寬度，但如果您知道寬高比，它真的很容易。
HTML
<div id="videoWithNoJs" class="videoWrapper">
<iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>
CSS - 高度和寬度○videoWrapper可以是任何東西，他們可以是百分比，如果你願意的話
.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"});
});
這可以也會觸發調整大小以確保它保持響應。最簡單的（可能不是最有效的）方法是使用以下方法。
$(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"});
});
可悲的是這似乎並不奏效....除非我失去了一些東西： 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"});
});
我張貼這是因爲上面的答案是當你有頂部和底部的黑色條紋。如果您的側面（左側和右側）有條，該怎麼辦？該腳本將處理這兩種情況。
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'});
}
偉大的解決方案:)謝謝。順便說一句。當包裝的寬度和高度都小於視頻的寬度和高度時，它不會在包裝中間正確對準視頻。 – mikep 2018-03-07 17:25:46
我花了很多時間試圖弄清楚這一點，但這裏是我使用Flexbox的對工作的簡單的CSS的解決方案。基本上，把視頻放在一個絕對位置，寬度和高度均爲100％的容器中，並使其顯示：以彎曲和居中內容！
您也可以在下面使用： -
<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe>
創建周圍的iframe代碼div容器，並給它一個類如：
<div class="video-container"><iframe.......></iframe></div>
添加的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%;
}
This coolestguidesontheplanet.com是此答案的來源URL。
好的，但如果屏幕太高怎麼辦？據我所知，如果視頻嵌入到div中，div將根據屏幕大小進行調整和調整大小。但是，在這種情況下，身體是容器，我希望視頻完全填充它。我不能控制它的大小，因爲它取決於屏幕/瀏覽器的大小... – Owly 2014-10-28 21:21:09