将YouTubevideo缩小为响应宽度
我在网站上embedded了一个YouTubevideo，当我将屏幕缩小至平板电脑或手机尺寸时，屏幕宽度缩小至560px左右。 这是YouTubevideo的标准，还是有一些我可以添加到代码，使其变得更小？
您可以通过CSS使YouTubevideo响应。 在“videowrapper”类的div中包装iframe，并应用以下样式：
.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%; } .videowrapper div应该在一个响应元素中。 在.videowrapper填充是必要的，以防止video崩溃。 您可能需要根据您的布局调整数字。
如果您正在使用Bootstrap，则还可以使用响应式embedded。 这将完全自动化使video响应。
http://getbootstrap.com/components/#responsive-embed
下面有一些示例代码。
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
我在这里接受的答案中使用了CSS，用于响应式YouTubevideo – 直到YouTube在2015年8月初左右更新了系统，YouTube的video都是相同的尺寸，但是无论出于何种原因，信箱所有的video。 顶部和底部的黑色条纹。
我已经调整了大小，并决定摆脱顶部填充和改变底部填充到56.45% 。 似乎看起来不错。
.videowrapper { position: relative; padding-bottom: 56.45%; height: 0; }
用于YouTube和Vimeo的精简的Javascript唯一解决scheme使用jQuery。
// -- After the document is ready $(function() { // Find all YouTube and Vimeo videos var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']"); // 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() { // Resize all videos according to their own aspect ratio $allVideos.each(function() { var $el = $(this); // Get parent width of this video var newWidth = $el.parent().width(); $el .width(newWidth) .height(newWidth * $el.data('aspectRatio')); }); // Kick off one resize to fix all videos on page load }).resize(); });
简单只用于embedded使用：
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
或者像Bootstrap这样的响应式框架。
<div class="row"> <div class="col-sm-6"> Stroke Awareness <div class="col-sm-6> <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe> </div> </div>
- 依靠iframe的宽度和高度来保持宽高比
- 可以使用高宽比（
width="16" height="9"） - 在resize之前，等待文档准备就绪
- 使用jQuery子string
*=select器而不是string^=开头 - 从videoiframe父级获取引用宽度，而不是预定义元素
- Javascript解决scheme
- 没有CSS
- 没有包装需要
感谢@Dampas的出发点。 https://stackoverflow.com/a/33354009/1011746
这是旧的线程，但我已经find新的答案在https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
以前的解决scheme的问题是，你需要有特殊的video代码，这是不适合大多数用途。 所以这里是没有特殊div的JavaScript解决scheme。
// 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
@ magi182的解决scheme是坚实的，但它缺乏设置最大宽度的能力。 我认为640px的最大宽度是必要的，因为其他的youtube缩略图看起来像素化。
我用两个包装纸的解决scheme对我来说就像一个魅力：
.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%; } <div class="videoWrapperOuter"> <div class="videoWrapperInner"> <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" frameborder="0" allowfullscreen></iframe> </div> </div>
我也将内包装的填充底部设置为50％，因为@ magi182的56％，顶部和底部出现黑条。
看完整的要点，并在这里 生活的例子 。
#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; } .videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }
<div id="hero"> <div class="container"> <div class="row-fluid"> <script src="https://www.youtube.com/iframe_api"></script> <center> <div class="videoWrapper"> <div id="player"></div> </div> </center> <script> function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' } } ); resizeHeroVideo(); } </script> </div> </div> </div>
var player = null; $( document ).ready(function() { resizeHeroVideo(); } ); $(window).resize(function() { resizeHeroVideo(); }); function resizeHeroVideo() { var content = $('#hero'); var contentH = viewportSize.getHeight(); contentH -= 158; content.css('height',contentH); if(player != null) { var iframe = $('.videoWrapper iframe'); var iframeH = contentH - 150; if (isMobile) { iframeH = 163; } iframe.css('height',iframeH); var iframeW = iframeH/9 * 16; iframe.css('width',iframeW); } }
resizeHeroVideo仅在Youtube播放器完全加载（页面加载不起作用）以及浏览器窗口大小调整后才被调用。 运行时，它会计算iframe的高度和宽度，并分配适当的值以保持正确的高宽比。 无论窗口是水平还是垂直resize，这都是有效的。
好吧，看起来像大的解决scheme。
为什么不加width: 100%; 直接在你的iframe中。 ;）
所以你的代码看起来像<iframe style="width: 100%;" ...></iframe> <iframe style="width: 100%;" ...></iframe>
试试这个会像我的情况那样工作。
请享用！ 🙂
我使用简单的CSS来做到这一点如下
HTML代码
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSS代码
<style type="text/css"> #vid { max-width: 100%; height: auto; }
