Question

我在我的网站上放置了一个嵌入YouTube视频。它正确响应并正确调整大小，但我不希望视频的高度为100％。我希望它的最大高度为450px然后调整大小。

// HTML

<div id="video-wrapper">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/DcqJvYF1ewA" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

// CSS

#video-wrapper {
  width: 100%;
  max-height: 450px;
}
.video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}

当我给视频包装器宽度为80％或400px它可以工作，但我不能对高度做同样的事情。当我将嵌入类更改为450px时，会裁剪视频。

这是我创建的JSFiddle：http://jsfiddle.net/c34phqgo/1/

Answer 1

我希望我能理解你，但我认为这就是你的意思。将iframe的最大高度设置为450px。与屏幕一起缩放。

#video-wrapper {
  width: 100%;
  height 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 450px;
}

自适应嵌入Youtube视频作为横幅

1 个答案: