blocks|key|57309|text|这是相当古老的，但这里的人们可能仍然需要帮助。我也需要这个，所以我创建了一个我的解决方案的笔，这应该会有帮助-+http://codepen.io/MikeMooreDev/pen/QEEPMv|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|57310|该示例显示了同一视频的两个版本，一个作为标准视频，另一个裁剪并居中对齐，以适应完整父元素的大小，而不显示可怕的黑条。|57311|你需要使用一些javascript来计算视频的新宽度，但如果你知道宽高比，这真的很容易。|57312|HTML|57313|<div+id="videoWithNoJs"+class="videoWrapper">
++<iframe+src="https://www.youtube.com/embed/ja8pA2B0RR4"+frameborder="0"+allowfullscreen></iframe>
</div>|code-block|syntax|javascript|57314|CSS+-+videoWrapper的高度和宽度可以是任何东西，如果你愿意，它们可以是百分比。|57315|.videoWrapper+{
++height:600px;
++width:600px;
++position:relative;
++overflow:hidden;
}

.videoWrapper+iframe+{
++++height:100%25;
++++width:100%25;
++++position:absolute;
++++top:0;
++++bottom:0;
}|57316|jQuery|57317|$(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%2B"px","left":"50%25","margin-left":"-"%2BhalfNewWidth%2B"px"});

});|57318|这也可以在调整大小时触发，以确保它保持响应。最简单(可能不是最有效)的方法是使用以下方法。|57319|$(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%2B"px","left":"50%25","margin-left":"-"%2BhalfNewWidth%2B"px"});

});|57320|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/MikeMooreDev/pen/QEEPMv^0|1K|15|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1H|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|C|$]]|$1|U|3|V|5|L|7|1J|8|@]|9|@]|C|$M|N]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|L|7|1L|8|@]|9|@]|C|$M|N]]|$1|10|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]]]

<p>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 - <a href="http://codepen.io/MikeMooreDev/pen/QEEPMv" rel="noreferrer">http://codepen.io/MikeMooreDev/pen/QEEPMv</a></p>

<p>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.</p>

<p>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.</p>

<p>HTML</p>

<pre><code>&lt;div id="videoWithNoJs" class="videoWrapper"&gt;
  &lt;iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

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

<pre><code>.videoWrapper {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}

.videoWrapper iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
}
</code></pre>

<p>jQuery</p>

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

});
</code></pre>

<p>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.</p>

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

});
</code></pre>


blocks|key|57355|text|可悲的是，这似乎不起作用……除非我遗漏了什么：http://codepen.io/Archie22is/pen/EWWoEM|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|57356|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%2B"px","left":"50%25","margin-left":"-"%2BhalfNewWidth%2B"px"});

});|code-block|syntax|javascript|57357|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/Archie22is/pen/EWWoEM^0|N|13|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Sadly this doesn't seem to be working.... Unless I am missing something: 
<a href="http://codepen.io/Archie22is/pen/EWWoEM" rel="nofollow noreferrer">http://codepen.io/Archie22is/pen/EWWoEM</a></p>

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

});
</code></pre>


blocks|key|57406|text|我之所以发布这篇文章，是因为上面的答案适用于在顶部和底部都有黑条的情况。如果你在两边(左和右)有横杆，会怎么样呢？此脚本将处理这两种情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57407|++++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%2B'px',+'min-width':newWidth%2B'px',+'position':'absolute',+'left':'50%25','margin-left':'-'%2B(newWidth/2)%2B'px'});

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

}|code-block|syntax|javascript|57408|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'm posting this because the answers above are for when you have the black bars at the top and at the bottom. What if you have the bars on the sides (left and right). This script will take care of the two scenario.</p>

<pre><code>    var vidRatio = vidWidth/vidHeight;
var wrapperHeight = $('#videoIFrameContainer').height();
var wrapperWidth = $('#videoIFrameContainer').width();
var wrapperRatio = wrapperWidth / wrapperHeight;
if(wrapperRatio &lt; 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'});

}
</code></pre>


blocks|key|57443|text|我花了很多时间试图弄清楚这一点，但这里有一个简单的CSS解决方案，它适用于我使用Flexbox。基本上，把视频放在一个容器的绝对位置，宽度和高度100%25，并使它显示:弯曲和居中的内容！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57444|https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c|offset|length|57445|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|3G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>I spent a lot of time trying to figure this out but here's a simple CSS solution that works for me using Flexbox. Basically, put the  video in a container with position absolute and width and height 100% and the make it display:flex and center the content!</p>

<p><a href="https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c" rel="nofollow noreferrer">https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c</a></p>


blocks|key|57481|text|你也可以使用下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57482|<iframe+class=""+style="background:url(ImageName.jpg)+center;+background-size:+100%25+140%25;+"+allowfullscreen=""+width="300"+height="200"></iframe>|code-block|syntax|javascript|57483|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can also use this below:-</p>

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


blocks|key|4563913|text|在iframe代码周围创建一个容器div，并给它一个类，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4563914|<div+class="video-container"><iframe.......></iframe></div>|code-block|syntax|javascript|4563915|在CSS中添加：|4563916|.video-container+{
++++position:relative;
++++padding-bottom:56.25%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%25;
++++height:100%25;
}|4563917|此coolestguidesontheplanet.com是此答案的源URL。|offset|length|4563918|entityMap|0|LINK|mutability|MUTABLE|url|https://coolestguidesontheplanet.com/videodrome/youtube/^0|0|0|0|0|1|S|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Create a container div around the iframe code and give it a class eg:</p>

<pre><code>&lt;div class="video-container"&gt;&lt;iframe.......&gt;&lt;/iframe&gt;&lt;/div&gt;
</code></pre>

<p>Add in the CSS:</p>

<pre><code>.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%;
}
</code></pre>

<p>This <a href="https://coolestguidesontheplanet.com/videodrome/youtube/" rel="noreferrer">coolestguidesontheplanet.com</a> is the Source URL of this answer.</p>


blocks|key|57560|text|要模拟相同的效果，重要的是保持16:9的纵横比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57561|HTML|57562|<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>|code-block|syntax|javascript|57563|CSS|57564|iframe{
++width:+100%25;
++height:+calc((100vw*9)+/16);
}|57565|这将删除黑条。|57566|现在我们可以将外部容器设置为100%25宽和100%25高，并隐藏溢出。|57567|.banner-video{
++height:+100vh;
++overflow:+hidden;
}|57568|现在上面的代码会一直工作到视窗宽高比大于16/9，所以我们必须添加基于宽高比的媒体查询。|57569|+@media+(max-aspect-ratio:+16/9)+{
++++.banner-video{
++++++width:+100%25;
++++++overflow:+hidden;
++++}

++++iframe{
++++++width:+calc((100vh*16)/9);
++++++height:+100vh;
++++++}
++}|57570|在此之后，youtube视频将在所有条件下保持完整的视口大小，并隐藏视频的额外部分。除了opera之外，所有的浏览器都支持它。|57571|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>To simulate the same effect, the important thing is to maintain aspect ratio which is 16:9. </p>

<p>HTML</p>

<pre><code>&lt;div class="banner-video"&gt;    
        &lt;iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay=1&amp;amp;mute=1&amp;amp;loop=1&amp;amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt; 
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}
</code></pre>

<p>This will remove black bars. </p>

<p>Now we can set the outer container to 100% width and 100% height and hide the overflow. </p>

<pre><code>.banner-video{
  height: 100vh;
  overflow: hidden;
}
</code></pre>

<p>Now the above code will work until viewport aspect ratio is greater than 16/9. So we have to add media query based on aspect ratio.</p>

<pre><code> @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

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

<p>After this youtube video will maintain full viewport size at all condition and hide the extra part of a video.
Other then opera it's supported in all the browser.</p>


blocks|key|57616|text|如果你只想找CSS+(没有JS)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57617|16:9比例的视频，如1920x1080或1280x720...|57618|下面是我的代码(在我的例子中是有效的)：|57619|.video+{
++++position:+relative;
++++height:+0;+
++++padding-bottom:+56.25%25;+/*16:9*/
++++padding-top:+0;+/*+Use+ZERO,+not+25px+or+30px+and+so+on+*/
++++overflow:+hidden;
}

.video+>+iframe+{
++++position:+absolute;
++++left:+0;
++++top:+0;
++++height:+100%25;
++++width:+100%25;
}|code-block|syntax|javascript|57620|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you're looking just for CSS (no JS).</p>

<p>Videos with 16:9 ratio such as 1920x1080 or 1280x720...</p>

<p>Here is my code (It's working in my case):</p>

<pre><code>.video {
    position: relative;
    height: 0; 
    padding-bottom: 56.25%; /*16:9*/
    padding-top: 0; /* Use ZERO, not 25px or 30px and so on */
    overflow: hidden;
}

.video &gt; iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
</code></pre>


<p>I have a fullscreen youtube video embedded on my website.</p>

<p><img src="https://i.stack.imgur.com/5pu6j.png" alt="enter image description here"></p>

<p>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.</p>

<p><img src="https://i.stack.imgur.com/uQrtD.png" alt="enter image description here"></p>

<p>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.</p>

<p>What I am trying to achieve is something you can see in the background of these two websites: <a href="http://ginlane.com/">http://ginlane.com/</a> and <a href="http://www.variousways.com/">http://www.variousways.com/</a>.</p>

<p>Is it possible to do this with a youtube video?</p>


Responsive fullscreen youtube video with no black bars?

容器

jQuery

我有一个全屏youtube视频嵌入在我的网站上。​​当浏览器的大小与视频的宽度和高度成正比时，它看起来很好。但是，当我将浏览器的大小调整到不同的比例时，视频周围会出现黑条。​​我想要的是让视频填充整个窗口的所有时间，但没有任何拉伸。我希望“多余的”隐藏时，浏览器的大小不成比例的视频。我正在努力实现的是你可以在这两个网站...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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