没有黑条的响应式全屏 youtube 视频? [英] Responsive fullscreen youtube video with no black bars?

问题描述

我的网站上嵌入了一个全屏 youtube 视频.

当浏览器的大小与视频的宽度和高度成正比时看起来不错.但是，当我将浏览器调整为不同的比例时，视频周围出现黑条.

我想要的是让视频始终填满整个窗口，但没有任何拉伸.当浏览器大小与视频不成比例时，我希望隐藏多余".

我想要实现的是你可以在这两个网站的背景中看到的东西:http://ginlane.com/ 和http://www.variousways.com/.

是否可以通过 youtube 视频做到这一点?

解决方案

这已经很老了，但人们可能仍然需要这里的帮助.我也需要这个，所以创建了一个我的解决方案的笔，它应该有帮助 - http://codepen.io/MikeMooreDev/pen/QEEPMv

该示例显示了同一视频的两个版本，一个为标准版本，第二个版本经过裁剪并居中对齐以适应完整父元素的大小，而不会显示可怕的黑条.

您需要使用一些 javascript 来计算视频的新宽度，但如果您知道纵横比，这真的很容易.

HTML

<iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>

CSS - videoWrapper 的高度和宽度可以是任何东西，如果你愿意，它们可以是百分比

.videoWrapper {高度:600px；宽度:600px；位置:相对；溢出:隐藏；}.videoWrapper iframe {高度:100%；宽度:100%；位置:绝对；顶部:0；底部:0;}

jQuery

$(document).ready(function(){//- 1.78 是视频的纵横比//- 如果您的视频为 1920 x 1080，这将起作用//- 要找到此值，将视频的原始宽度除以高度，例如 1920/1080 = 1.78var 纵横比 = 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() {//与加载相同的代码var 纵横比 = 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"});});

I have a fullscreen youtube video embedded on my website.

It looks good when the size of the browser is proportional to the video’s width and height. However, when I resize the browser to a different proportion, I get black bars around the video.

What I want is to have the video fill the whole window at all times, but without any stretching. I want the "excess" to hide when the browser size is not proportional to the video.

What I am trying to achieve is something you can see in the background of these two websites: http://ginlane.com/ and http://www.variousways.com/.

Is it possible to do this with a youtube video?

解决方案

This is pretty old but people may still need help here. I needed this too so have created a Pen of my solution which should help - http://codepen.io/MikeMooreDev/pen/QEEPMv

The example shows two versions of the same video, one as standard and the second cropped and centrally aligned to fit the size of the full parent element without showing the hideous black bars.

You need to use some javascript to calculate a new width for the video but it's really easy if you know the aspect ratio.

HTML

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

CSS - The height and width o the videoWrapper can be anything, they can be percentages if you so wish

.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"});

});

This can also be triggered on resize to ensure it remains responsive. The easiest (probably not most efficient) way to do this is with the following.

$(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"});

});

这篇关于没有黑条的响应式全屏 youtube 视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！