居中、裁剪、适合视频背景（在 iframe 中）到父元素

Posted 2023-05-09

【中文标题】居中、裁剪、适合视频背景（在 iframe 中）到父元素

【英文标题】：Center, crop, fit video background (in iframe) to parent element

【发布时间】：2017-10-31 13:40:54

【问题描述】：

给定以下标记：

<div class="viewport">
    <iframe src="youtube.com/blabla"></iframe>
</div>

还有下面的css：

.viewport 
    height: 100vh;
    width: 100%;


iframe 
    position: absolute;

并给出以下事实：

在 iframe 中播放的视频的宽高比为 16:9

是否可以编写一个脚本，将 iframe 拉伸到大于父级的大小，以便 iframe 溢出，隐藏黑条？（是的，我知道它也会裁剪部分视频，但没关系）

这是脚本必须解决的两个示例：

在第一张图片中，黑条位于左右两侧。为了解决这个问题，脚本会将 iframe 拉伸得更宽更高，从而将视频拉伸到里面，直到黑条消失。我们会丢失视频的顶部和底部，但没关系。在第二张图片中，黑条位于顶部和底部，我们需要将其拉伸并丢失视频的两侧。

这是我的注释尝试，但不幸的是，代码并未涵盖所有情况。一旦我的视口的纵横比高于~2.1，黑条就会回来。随意废弃我的脚本。

    var block = $('.viewport');
    var block_h = block.outerHeight();
    var block_w = block.outerWidth();

    var ratio = block_w / block_h;

    // If viewport is landscape (black bars on left/right)
    if( ratio >= 1.77777778 ) 
        var video_w = (block_h * 16) / 9; // Get width of video within iframe
        var total_black_bar_w = block_w - video_w; // Black bar total width
        var new_iframe_w = (block_w + total_black_bar_w); // New width of the iframe needed to stretch the video wide enough to hide the black bars
        var adjustment_percentage = new_iframe_w / block_w; // If we adjusted the width by 10% for example, then we also need to apply that percentage to the height

        var new_iframe_h = (block_h * adjustment_percentage) + 30;

        var pull_left = total_black_bar_w / 2; // how far to pull left to center the iframe outside of the parent container
        var pull_top = (new_iframe_h - block_h) / 2; // same for top
    
    // Portrait viewport (black bars on top/bottom)
    else 
        var video_h = (block_w * 9) / 16;
        var total_black_bar_h = block_h - video_h;
        var new_iframe_h = (block_h + total_black_bar_h);
        var adjustment_percentage = new_iframe_h / block_h;

        var new_iframe_w = (block_w * adjustment_percentage) + 30;

        var pull_left = total_black_bar_w / 2;
        var pull_top = (new_iframe_h - block_h) / 2;
    

    block.find('iframe').css(
        'width': new_iframe_w,
        'height': new_iframe_h,
        'left': '-' + pull_left + 'px',
        'top': '-' + pull_top + 'px'
    );

【参考方案1】：

它实际上比你的代码更简单。

始终保持 iframe 的比例，但只需相应地调整整个内容的大小（在现实中缩放）以填充视口。

使用 css 定位/变换使其居中。

这是一个具有较小视口的示例（带有红色边框），因此您可以看到它的实际效果。

jQuery(function($) 
  var viewport = $('.viewport'),
    frame = viewport.find('iframe'),
    frameRatio = 16 / 9;

  $(window).on('resize', function() 
    var width = viewport.outerWidth(),
      height = viewport.outerHeight(),
      ratio = width / height,
      targetWidth = width,
      targetHeight = height;

    if (ratio > frameRatio) 
      // viewport is wider than video
      // correct the height
      targetHeight = width / frameRatio;
     else 
      // viewport is taller than video
      // correct the width
      targetWidth = height * frameRatio;
    

    frame.css(
      width: targetWidth,
      height: targetHeight
    );
  ).trigger('resize');
);

.viewport 
  height: 50vh;
  width: 50vw;
  position: relative;
  border: 1px solid red;
  margin: 10% 25%;


iframe 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="viewport">
  <iframe src="//www.youtube.com/embed/1La4QzGeaaQ?autoplay=1"></iframe>
</div>

在http://jsfiddle.net/agrxtwn7/embedded/ 看到它（转到结果），因为似乎 SO 停止播放 youtube 嵌入

【讨论】：

哇它好用！由于我的特殊布局，我不得不删除 z-index: -1 但除此之外它是完美的。非常感谢

@Brian，是的，我放了 -1，这样你就可以看到视口的边界了。