Question

<!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？目前，当它调整大小时，存在巨大的黑色差距，视频位于中间。

Answer 1

请查看以下网站。我认为它需要响应式嵌入式视频才能得到答案。

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

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

希望它有所帮助。

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

Answer 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%;
}

改变嵌入式Youtube视频的方面比例

2 个答案: