YouTube 视频高度比，拉伸至 window 宽度并在父容器外拉伸

Question

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

iframe 在 div、fluid-width-video-wrapper 内，因为使用了 FitVids jQuery 插件。

这是 "stretch outside parent element" 脚本：

   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()，因此无论 margins/paddings 是否拉伸全屏。

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

中的脚本

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

但是，正如您在 fiddle 中看到的那样，它使视频 全屏显示 。我想要全宽且宽高比正确。我应该在这个脚本中使用什么作为 height？

它必须是流动的，因为 window 大小不同。我也将它与 $(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>

Answer 2

如果您使用“100%”而不是 "px"，是否有可能得到您想要的？

编辑 *

对不起，我发布了答案，在我发布后我将 Ilpo Oksanen 的评论改红，但我认为这是解决方案。如果没有，请详细说明您的问题

Answer 3

我想我现在找到了一个无容器的解决方案，它也适用于我的 snap-to-edge-script。

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

由于视频的高度应为 56.25%，宽度为 window 内部宽度的 100%，这意味着高度应为 window 宽度的 56.25%。

YouTube 视频高度比，拉伸至 window 宽度并在父容器外拉伸

YouTube video height ratio, stretch to window width & stretching outside parent container

html

javascript

css

youtube

jquery