首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >没有黑条的响应式全屏youtube视频?

没有黑条的响应式全屏youtube视频?
EN

Stack Overflow用户
提问于 2014-10-29 03:44:06
回答 8查看 73K关注 0票数 28

我有一个全屏youtube视频嵌入在我的网站上。

当浏览器的大小与视频的宽度和高度成正比时,它看起来很好。但是,当我将浏览器的大小调整到不同的比例时,视频周围会出现黑条。

我想要的是让视频填充整个窗口的所有时间,但没有任何拉伸。我希望“多余的”隐藏时,浏览器的大小不成比例的视频。

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

有没有可能用youtube视频做到这一点?

EN

回答 8

Stack Overflow用户

发布于 2016-06-17 17:17:29

这是相当古老的,但这里的人们可能仍然需要帮助。我也需要这个,所以我创建了一个我的解决方案的笔,这应该会有帮助- http://codepen.io/MikeMooreDev/pen/QEEPMv

该示例显示了同一视频的两个版本,一个作为标准视频,另一个裁剪并居中对齐,以适应完整父元素的大小,而不显示可怕的黑条。

你需要使用一些javascript来计算视频的新宽度,但如果你知道宽高比,这真的很容易。

HTML

代码语言:javascript
复制
<div id="videoWithNoJs" class="videoWrapper">
  <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>

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

代码语言:javascript
复制
.videoWrapper {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}

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

jQuery

代码语言:javascript
复制
$(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"});

});

这也可以在调整大小时触发,以确保它保持响应。最简单(可能不是最有效)的方法是使用以下方法。

代码语言:javascript
复制
$(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"});

});
票数 14
EN

Stack Overflow用户

发布于 2017-11-25 20:21:41

在iframe代码周围创建一个容器div,并给它一个类,例如:

代码语言:javascript
复制
<div class="video-container"><iframe.......></iframe></div>

在CSS中添加:

代码语言:javascript
复制
.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是此答案的源URL。

票数 11
EN

Stack Overflow用户

发布于 2018-08-01 02:28:39

要模拟相同的效果,重要的是保持16:9的纵横比。

HTML

代码语言:javascript
复制
<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

代码语言:javascript
复制
iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

这将删除黑条。

现在我们可以将外部容器设置为100%宽和100%高,并隐藏溢出。

代码语言:javascript
复制
.banner-video{
  height: 100vh;
  overflow: hidden;
}

现在上面的代码会一直工作到视窗宽高比大于16/9,所以我们必须添加基于宽高比的媒体查询。

代码语言:javascript
复制
 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

在此之后,youtube视频将在所有条件下保持完整的视口大小,并隐藏视频的额外部分。除了opera之外,所有的浏览器都支持它。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26617154

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档