更改嵌入式 Youtube 视频的纵横比答案

【问题标题】：Changing Aspect Ration of Embedded Youtube Video更改嵌入式 Youtube 视频的纵横比
【发布时间】：2016-04-27 04:50:54
【问题描述】：

<!DOCTYPE HTML>
<head>
<style>

    body {
        overflow: hidden;
        margin:0;
    }    
</style>

</head>
<body>


    <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&showinfo=0" frameborder="0" allowfullscreen></iframe>


<script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>    

<script>

    $(function(){
      $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

      $(window).resize(function(){
        $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
      });
    });

</script>
</body>

当我调整大小时，有没有办法让 iframe 随视频一起缩小？目前，当它调整大小时，有一个巨大的黑色间隙，视频位于中间。

【问题讨论】：

标签： javascript jquery html css youtube

【解决方案1】：

请查看以下网站。我认为您需要响应式嵌入式视频的答案。

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

https://coolestguidesontheplanet.com/videodrome/youtube/

希望对你有帮助。

使用 CSS 方式而不是使用 javascript 可能更容易。

【讨论】：

【解决方案2】：

这里不需要javascript。你可以用纯 CSS 来做到这一点。

这就是 bootstrap 的做法：

允许浏览器根据通过创建一个内在比率来确定其包含块的宽度可以在任何设备上正确扩展。

http://codepen.io/partypete25/pen/XdPGmb?editors=1100#

对于 16by9 视频，请使用：

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

对于 4by3 视频，请使用：

.embed-responsive-4by3 {
  padding-bottom: 75%;
}

【讨论】：