收缩的YouTube视频响应宽度收缩的YouTube视频响应宽度(Shrink a YouTube

我有一个YouTube视频嵌入到我们的网站，当我缩小屏幕平板电脑或手机尺寸停靠在周围560像素的宽度缩小。 这是标准的YouTube视频，或者是有什么我可以添加到代码，使之去小吗？

Answer 1:

你可以让YouTube视频响应与CSS。 包装的iframe中与类的“videowrapper”一个div并应用以下样式：

.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的填充是必要的，以保持视频坍塌。 您可能需要调整，这取决于你的布局数量。

Answer 2:

如果使用的是引导，你也可以使用一个负责任的嵌入。 这将完全自动化使得视频（S）响应。

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>

Answer 3:

我曾经在这里为我的回应YouTube视频接受答案的CSS - 伟大的工作权利，直到YouTube上更新他们的系统在2015年左右八月开始在YouTube上的这些视频是相同的尺寸，但无论出于何种原因在接受答案的CSS现在信箱我们所有的视频。 横跨顶部和底部的黑色条带。

我tickered与周围的大小和摆脱顶部填充和更换底部填充入驻56.45% 似乎好看。

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

Answer 4:

精致的Javascript只有YouTube和Vimeo的使用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();
});

简单的只嵌入使用：

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

或者像引导响应式的框架。

<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" ）
• 等待，直到文件是在调整前准备
• 用了jQuery子*=选择，而不是字符串的开始^=
• 从视频的iframe父获取代替预定元素的基准宽度
• JavaScript解决方案
• 无CSS
• 没有包装需要

由于@Dampas为出发点。 https://stackoverflow.com/a/33354009/1011746

Answer 5:

这是旧线，但我必须找到新的答案https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

与以前的解决方案的问题是，你需要有各地的视频代码，这是不适合大多数使用特殊股利。 因此，这里是没有特别div JavaScript解决方案。

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

Answer 6:

@ magi182的解决方案是固体，但它缺乏设定一个最大宽度的能力。 我觉得640像素，最大宽度是必要的，因为otherwhise YouTube的缩略图看起来像素化。

我有两个包装解决方案的工作对我来说就像魅力：

.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％，在顶部和底部出现黑条出现。

Answer 7:

这里查看完整的要点和住在这里例子 。

#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的高度和宽度，并分配维持正确的纵横比相应的值。 这工作窗口是否水平或垂直调整。

Answer 8:

随着信用前面的回答https://stackoverflow.com/a/36549068/7149454

自举兼容，adust（在本例中300像素）的容器宽度和你去好：

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; 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>

Answer 9:

好吧，看起来像大的解决方案。

为什么不添加width: 100%; 直接在您的iframe中。 ;）

所以，你的代码会看起来像<iframe style="width: 100%;" ...></iframe> <iframe style="width: 100%;" ...></iframe>

试试这个它会工作，因为它在我的情况下工作。

请享用！ :)

Answer 10:

我做这个简单的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;

}

文章来源: Shrink a YouTube video to responsive width