javascript - YouTube 视频高度比、拉伸(stretch)到窗口宽度以及在父容器外拉伸(stretch)

Question

我在 div 中嵌入了 YouTube。此 div .entry-content 的 max-width 为 30em。 YouTube 嵌入我想要全窗口宽度，延伸到 #container 之外。为此，我有一个 JS 脚本，我已成功使用它使 img 元素延伸到 entry-content 之外。 img 在 CSS 中确定了 width:100vw。

iframe 在一个 div 中，fluid-width-video-wrapper，因为使用了 FitVids jQuery 插件。

这是“在父元素外拉伸(stretch)”脚本:

   var bodyWidth = $('body').width();
   var elemWidth = $('.entry-content p').width();
   var margin = bodyWidth-elemWidth;
    var dividedMargin = margin / 2; // Divide the margin by 2
    var negativeMargin = dividedMargin * -1; // set number to negative number
    $('.entry-content iframe').css("margin-left", negativeMargin + "px"); 

我还在 $(window).resize() 中使用了它，这样无论边距/填充如何，它都能拉伸(stretch)全屏。

width:100vw 宽度不适用于 CSS 中的 iframe，因此我使用了来自 this fiddle 的脚本.

$('.entry-content iframe').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' */});

但是，正如您在 fiddle 中看到的那样，它使视频全屏。我想要具有正确纵横比的全宽。我应该在此脚本中将什么用作高度？

随着窗口大小的变化，它必须是流动的。我也将它与 $(window).resize(); 一起使用，这会使页面变慢，但现在这不是问题。

Answer 1

不需要 JS。以下是制作响应式播放器所需的全部内容，该播放器的宽度为父级的 100%，纵横比为 16:9。

body{
  margin:0;
}

.videoContainer {
  width: 100vw; /*now it is 100% of viewport (window) width.*/
  display: inline-block;
  position: relative;
}

.videoContainer::after {
  padding-top: 56.25%; /* 16:9 ratio - divide height by width and multiply by 100 */
  display: block;
  content: '';
}

.videoContainer>iframe{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

<div class="videoContainer">
  <iframe src="https://www.youtube.com/embed/U5LwcvVAKDg" frameborder="0" allowfullscreen></iframe>
</div>