blocks|key|342035|text|您可以使用CSS来响应YouTube视频。使用"videowrapper“类将iframe包装在div中，并应用以下样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342036|.videowrapper+{
++++float:+none;
++++clear:+both;
++++width:+100%25;
++++position:+relative;
++++padding-bottom:+56.25%25;
++++padding-top:+25px;
++++height:+0;
}
.videowrapper+iframe+{
++++position:+absolute;
++++top:+0;
++++left:+0;
++++width:+100%25;
++++height:+100%25;
}|code-block|syntax|javascript|342037|.videowrapper分区应该在响应式元素中。.videowrapper上的填充是必要的，以防止视频折叠。您可能需要根据您的布局调整数字。|342038|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:</p>

<pre><code>.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</code></pre>

<p>The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.</p>


blocks|key|124197|text|我在我的响应式YouTube视频中使用了CSS，直到YouTube在2015年8月初更新了他们的系统。YouTube上的视频尺寸是一样的，但不管是什么原因，我们所有的视频现在都是信箱了。顶部和底部的黑色条纹。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124198|我已经对尺寸进行了调整，并决定去掉顶部填充，将底部填充改为56.45%25。看起来不错。|offset|length|style|CODE|124199|.videowrapper+{
++++position:+relative;
++++padding-bottom:+56.45%25;
++++height:+0;
}|code-block|syntax|javascript|124200|entityMap^0|0|T|6|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I used the CSS in the accepted answer here for my responsive YouTube videos - worked great right up until YouTube updated their system around the start of August 2015.  The videos on YouTube are the same dimensions but for whatever reason the CSS in the accepted answer now letterboxes all our videos.  Black bands across top and bottom.</p>

<p>I've tickered around with the sizes and settled on getting rid of the top padding and changing the bottom padding to <code>56.45%</code>.  Seems to look good.</p>

<pre><code>.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}
</code></pre>


blocks|key|124256|text|这是个老帖子，但我在https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php上找到了新的答案|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|124257|以前的解决方案的问题是，你需要在视频代码周围有专门的div，这不适合大多数用途。所以这里是没有特殊div的JavaScript解决方案。|124258|//+Find+all+YouTube+videos+-+RESIZE+YOUTUBE+VIDEOS!!!
var+$allVideos+=+$("iframe[src%5E='https://www.youtube.com']"),

//+The+element+that+is+fluid+width
$fluidEl+=+$("body");

//+Figure+out+and+save+aspect+ratio+for+each+video
$allVideos.each(function()+{

++++$(this)
++++.data('aspectRatio',+this.height+/+this.width)

++++//+and+remove+the+hard+coded+width/height
++++.removeAttr('height')
++++.removeAttr('width');

});

//+When+the+window+is+resized
$(window).resize(function()+{

++++var+newWidth+=+$fluidEl.width();

++++//+Resize+all+videos+according+to+their+own+aspect+ratio
++++$allVideos.each(function()+{

++++++++var+$el+=+$(this);
++++++++$el
++++++++.width(newWidth)
++++++++.height(newWidth+*+$el.data('aspectRatio'));

++++});

//+Kick+off+one+resize+to+fix+all+videos+on+page+load
}).resize();

//+END+RESIZE+VIDEOS|code-block|syntax|javascript|124259|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php^0|A|21|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>This is old thread, but I have find new answer on <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php" rel="nofollow">https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php</a></p>

<p>The problem with previous solution is that you need to have special div around video code, which is not suitable for most uses. So here is JavaScript solution without special div.</p>

<pre><code>// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS
</code></pre>


blocks|key|342197|text|@magi182的解决方案是可靠的，但它缺乏设置最大宽度的能力。我认为最大宽度为640px是必要的，否则youtube缩略图看起来像像素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342198|我的两个包装器的解决方案对我来说很有吸引力：|342199|.videoWrapperOuter+{
++max-width:640px;+
++margin-left:auto;
++margin-right:auto;
}
.videoWrapperInner+{
++float:+none;
++clear:+both;
++width:+100%25;
++position:+relative;
++padding-bottom:+50%25;
++padding-top:+25px;
++height:+0;
}
.videoWrapperInner+iframe+{
++position:+absolute;
++top:+0;
++left:+0;
++width:+100%25;
++height:+100%25;
}
<div+class="videoWrapperOuter">
++<div+class="videoWrapperInner">
++++<iframe+src="//www.youtube.com/embed/C6-TWRn0k4I"+
++++++frameborder="0"+allowfullscreen></iframe>
++</div>
</div>|code-block|syntax|javascript|342200|我还将内部包装器中的padding-bottom设置为50%25，因为@magi182的56%25会在顶部和底部出现一个黑条。|342201|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|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>@magi182's solution is solid, but it lacks the ability to set a maximum width. I think a maximum width of 640px is necessary because otherwhise the youtube thumbnail looks pixelated. </p>

<p>My solution with two wrappers works like a charm for me:</p>

<pre><code>.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
&lt;div class="videoWrapperOuter"&gt;
  &lt;div class="videoWrapperInner"&gt;
    &lt;iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I also set the padding-bottom in the inner wrapper to 50 %, because with @magi182's 56 %, a black bar on top and bottom appeared.</p>


blocks|key|124335|text|如果你使用的是Bootstrap，你也可以使用响应式嵌入。这将使视频响应完全自动化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124336|http://getbootstrap.com/components/#responsive-embed|offset|length|124337|下面是一些示例代码。|124338|
<div+class="embed-responsive+embed-responsive-16by9">
++<iframe+class="embed-responsive-item"+src="..."></iframe>
</div>


<div+class="embed-responsive+embed-responsive-4by3">
++<iframe+class="embed-responsive-item"+src="..."></iframe>
</div>|code-block|syntax|javascript|124339|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>If you are using Bootstrap you can also use a responsive embed. This will fully automate making the video(s) responsive.</p>

<p><a href="http://getbootstrap.com/components/#responsive-embed">http://getbootstrap.com/components/#responsive-embed</a></p>

<p>There's some example code below.</p>

<pre><code>&lt;!-- 16:9 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 4:3 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-4by3"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>


blocks|key|124365|text|好的，看起来是个很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124366|为什么不直接在你的iframe中添加width:+100%25;呢？;)|offset|length|style|CODE|124367|因此，您的代码应该类似于<iframe+style="width:+100%25;"+...></iframe>|124368|试试这个，它会和我的情况一样有效。|124369|尽情享受！:)|124370|entityMap^0|0|I|C|0|C|16|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

<p>Okay, looks like big solutions. </p>

<p>Why not to add <code>width: 100%;</code> directly in your iframe. ;)</p>

<p>So your code would looks something like <code>&lt;iframe style="width: 100%;" ...&gt;&lt;/iframe&gt;</code></p>

<p>Try this it'll work as it worked in my case. </p>

<p>Enjoy! :)</p>


blocks|key|342322|text|我用简单的css实现这一点，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342323|HTML代码|342324|<iframe+id="vid"+src="https://www.youtube.com/embed/RuD7Se9jMag"+frameborder="0"+allowfullscreen></iframe>|code-block|syntax|javascript|342325|CSS代码|342326|<style+type="text/css">
#vid+{

max-width:+100%25;
height:+auto;

}|342327|​|342328|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I make this with simple css as follows</p>

<p>HTML CODE</p>

<pre><code>&lt;iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
</code></pre>

<p>CSS CODE</p>

<pre><code>&lt;style type="text/css"&gt;
#vid {

max-width: 100%;
height: auto;

}
</code></pre>

<p></p>


blocks|key|124466|text|与前一个答案https://stackoverflow.com/a/36549068/7149454的积分|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|124467|Boostrap兼容，调整你的容器宽度(在这个例子中是300px)，你就可以开始了：|124468|<div+class="embed-responsive+embed-responsive-16by9"+style="height:+100+%25;+width:+300px;+">
<iframe+class="embed-responsive-item"+src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841"+allow="accelerometer;+autoplay;+encrypted-media;+gyroscope;+picture-in-picture"+allowfullscreen=""+frameborder="0"></iframe>
</div>|code-block|syntax|javascript|124469|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/36549068/7149454^0|6|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>With credits to previous answer <a href="https://stackoverflow.com/a/36549068/7149454">https://stackoverflow.com/a/36549068/7149454</a></p>

<p>Boostrap compatible, adust your container width (300px in this example) and you're good to go:</p>

<pre><code>&lt;div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; "&gt;
&lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>


blocks|key|342429|text|现代简单css解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342430|新的aspect-ratio是这个问题的现代解决方案。|offset|length|342431|aspect-ratio:+16+/+9;|code-block|syntax|javascript|342432|这就是自动生成div、image、iframe大小所需的全部内容。Samples。|342433|它有good+support，但还没有在Safari中(将在即将到来的iOS15中使用)-所以现在你仍然需要使用后备。您可以使用@supports特性来实现这一点|342434|.element+
{
+++aspect-ratio:+16+/+9;

+++@supports+not+(aspect-ratio:+16+/+9)+
+++{
+++++++//+take+your+pick+from+the+other+solutions+on+this+page
+++}
+}|342435|假设您的开发浏览器确实支持此属性，请确保在没有此属性的情况下通过注释掉aspect-ratio和@supports进行测试。|style|CODE|342436|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio|1|https://css-tricks.com/a-first-look-at-aspect-ratio/|2|https://caniuse.com/mdn-css_properties_aspect-ratio^0|0|2|C|0|0|0|X|7|1|0|2|C|2|0|0|Z|C|1C|9|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|M|3|N|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|O|3|P|5|H|7|1K|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|1L|8|@$D|1M|E|1N|S|T]|$D|1O|E|1P|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]|14|$5|X|Y|Z|A|$10|15]]]]

<h3 id="modern-simple-css-solution-vvwh">Modern simple css solution</h3>
<p>The new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio" rel="nofollow noreferrer">aspect-ratio</a> is the modern solution to this problem.</p>
<pre><code>aspect-ratio: 16 / 9;
</code></pre>
<p>That's all you need to make a div, image, iframe size automatically. <a href="https://css-tricks.com/a-first-look-at-aspect-ratio/" rel="nofollow noreferrer">Samples</a>.</p>
<p>It's got <a href="https://caniuse.com/mdn-css_properties_aspect-ratio" rel="nofollow noreferrer">good support</a>, but is not yet in Safari (will be for upcoming iOS15) - so for now you'll still need to use a fallback. You can achieve that with the @supports feature</p>
<pre><code>.element 
{
   aspect-ratio: 16 / 9;

   @supports not (aspect-ratio: 16 / 9) 
   {
       // take your pick from the other solutions on this page
   }
 }
</code></pre>
<p>Assuming your development browser does support this property be sure to test without it by commenting out both <code>aspect-ratio</code> and <code>@supports</code>.</p>


<p>I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?</p>


Shrink a YouTube video to responsive width

容器

我在我们的网站上嵌入了一段YouTube视频，当我将屏幕缩小到平板电脑或手机大小时，它的宽度就会在560px左右停止缩小。这是YouTube视频的标准吗?还是有什么我可以添加到代码中以使其变得更小？

问将YouTube视频缩小到响应宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将YouTube视频缩小到响应宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将YouTube视频缩小到响应宽度
EN