YouTube视频高度比例，拉伸到窗口宽度&在父容器外拉伸

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

本文关键字：高度 视频 YouTube 窗口      更新时间：2023-09-26

我在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 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()，这样它无论边距/填充拉伸全屏。

width:100vw宽度在CSS中不适合我的iframe，所以我使用了这个脚本。

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

然而，正如您所看到的那样，它使视频全屏。我想要全宽度正确的长宽比。在这个脚本中我应该使用什么作为height ?

它必须是流动的，因为窗口大小在变化。我用它与$(window).resize();也，这减慢了页面的地狱，但这不是一个问题，现在。

不需要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>

我想我现在已经找到了一个无容器的解决方案，这也适用于我的snap-to-edge脚本。

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

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

是否有可能使用"100%"而不是"px"你得到你想要的?

  • edit *

我很抱歉我贴出了答案，在我贴完之后我又看到了Ilpo Oksanen的评论，但我认为这是解决方案。如果没有，请详细说明

相关文章：