Question

我想在“弹出窗口”中使用嵌入代码集成YouTube视频。

我的问题是视频没有约束其父级的高度。我希望它不要高于包含视频的div #pop-up。现在，它将尽可能宽，并保持其纵横比在高度上，即使它会影响父母身高。我想要的是视频在父级填充或边距内尽可能大，保持中心并保持其宽高比（16：9）。

我不想使用jQuery，javascript可能是一个选项。

*{
  margin:0;
  padding:0;
}
#pop-up{
  width:100%;
  height:100vh;
  padding:5%;
  box-sizing: border-box;
  background:rgba(0,0,0,0.2);
}

<div id="pop-up">
  <!--Youtube embed code-->
  <div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>
</div>

这是我想要的一个例子：

使用广泛的浏览器，如电脑或风景手机：

使用像浏览器手机或平板电脑这样的高浏览器：

Answer 1

我对你的造型做了一些改动。

请查看这是否适合您。

正如您在下面所看到的，这就是您要求的方式：

＆＃13;

@media (max-width: 1024px) {
  body #pop-up iframe {
    max-height: 34.6vh;
  }
}

* {
  margin: 0;
  padding: 0;
}

#pop-up {
  width: 100%;
  height: 100%;
  padding: 5%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pop-up iframe {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  max-height: 576px;
}

＆＃13;

<div id="pop-up">
  <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

Answer 2

因此，这里的解决方案是使用媒体查询来监视窗口宽高比，因为我的弹出窗口首先覆盖整个窗口大小。然后我不得不使用具有100％高度的正确纵横比（16px x 9px）的图像来利用浏览器必须保持图像宽度与其高度的正确比例的容量。使用内联块然后捕获图像大小和位置绝对顶部0右0底部0左0技巧将父级的大小应用于视频容器。

这一切都可以正常工作，在其子元素的大小调整或窗口大小调整时自动刷新宽度，所以我使用了一个简单的简单的javascript线，只需删除并重新应用宽度自动完成了大小调整。

我放弃了中心视频的想法，而是使用剩下的空间来应用更多内容。

＆＃13;

var rtime;
var timeout = false;
var delta = 200;
window.onresize = function(){
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
};

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        if(window.innerWidth/window.innerHeight>16/10){
          document.getElementById("videoWrapper").style.width="0";
          setTimeout(function(){
            document.getElementById("videoWrapper").style.width="auto";
          },100)
        }
    }               
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}

#pop-up {
  width: 100%;
  height: 100%;
  padding: 5%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
}
#videoWrapper {
  width:100%;
  position:relative;
  height:0;
  padding-bottom:56.25%;
  width:100%;
}
@media all and (min-aspect-ratio: 16/10) { 
  #videoWrapper {
    height:100%;
    position:relative;
    padding-bottom:0;
    display:inline-block;
    width:auto;
  }
  #videoWrapper img{
    height:100%;
  }
}

＆＃13;

<div id="pop-up">
  <div id="videoWrapper">
    <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2"  frameborder="0" allowfullscreen style="position:absolute;width:100%;height:100%;left:0"></iframe>
    <img src="http://jaunemoutarde.ca/denique/4/images/16x9_aspect_ratio.png" alt="" />
  </div>
</div>

＆＃13;

宽度和高度均保持最大100％的视频宽高比

2 个答案: