改变嵌入式YouTube视频的方面配比

Changing Aspect Ration of Embedded Youtube Video

本文关键字：方面配 视频 嵌入式 YouTube 改变      更新时间：2023-09-26
<!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 随着视频而缩小？目前，当它调整大小时，有一个巨大的黑色间隙，视频位于中间。

请查看以下网站。我认为它有你需要一个响应式嵌入式视频的答案。

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

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

希望对您有所帮助。

用CSS的方式做可能比使用javascript更容易。

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

这就是引导程序的做法：

允许浏览器根据 它们的包含块的宽度，通过创建一个内在比率 可在任何设备上正确缩放。

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

对于 16by9 视频，请使用：

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

对于 4by3 视频，请使用：

.embed-responsive-4by3 {
  padding-bottom: 75%;
}
相关文章：