使嵌入式 youtube 响应有问题但在我的桌面显示器上不是那么大

Question

我正在尝试让我的响应式嵌入式 YouTube 视频在常规桌面显示器上看起来不会那么大。它在移动设备上看起来不错，但是当试图调整大小以使其在桌面上看起来不错时，它会破坏移动设备上的响应。

我尝试在 css 中调整宽度/高度百分比，这允许我在桌面上调整大小，但会破坏移动设备的响应能力。

.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%;
}

<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen>
</iframe>
</div>

我正在尝试让我的嵌入式视频看起来像一个正常大小的视频，但响应迅速。目前它占据了整个屏幕。

这是桌面显示的照片。

Answer 1

使用 max-width CSS 属性为您希望视频停止扩展的位置设置硬性限制。这样一来，如果用户使用的是超宽显示器等设备，您的内容就会在您希望的位置达到上限。

这是一个例子：

.expandable{
    width: 80%
    max-width: 1200px;
}

使嵌入式 youtube 响应有问题但在我的桌面显示器上不是那么大

Having issues making an embedded youtube responsive but not so huge on my desktop display

html

css

youtube

responsive