移动端网站内嵌YouTube视频显示异常，调整宽高仍未解决

我的网站上的YouTube视频在移动端显示异常，我尝试调整了每个视频的宽度和高度，但问题仍然存在。

现有代码 #

HTML 代码 #

<div class="playing-cards">
    <iframe width="611" height="450" src="https://www.youtube.com/embed/7qjkrDsgvO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
  
<div class="closr">
    <iframe width="611" height="450" src="https://www.youtube.com/embed/_PupZlKYYCU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS 代码 #

}

.playing-cards{
    text-align: center;
    height: 560px;
    width: 315px;
    position: absolute;
    top: 107%; right: 0%;
    bottom: 50%; left: 30%;
    
}

.closr{
   text-align: center;
    height: 560px;
    width: 315px;
    position: absolute;
    top: 185%; right: 0%;
    bottom: 40%; left: 30%;
    
}

问题根源在于固定尺寸的iframe和绝对定位容器的硬编码布局，直接导致移动端适配失效。按以下步骤修改即可解决：

1. 先删除CSS开头多余的}，修复语法错误，否则整个CSS规则会失效。
2. 给视频添加响应式容器，用宽高比实现自适应，避免固定尺寸变形：
   • 利用padding-top: 56.25%实现YouTube标准的16:9比例，让容器随宽度自动调整高度。
   • 将iframe设置为绝对定位，占满容器空间。
3. 调整绝对定位容器的布局逻辑，避免移动端溢出：
   • 用transform: translateX(-50%)实现水平居中，替代固定left值。
   • 添加媒体查询，在移动端调整容器的top值和宽度，防止视频重叠或溢出屏幕。

修改后的完整代码 #

HTML 代码

<div class="video-container playing-cards">
    <iframe src="https://www.youtube.com/embed/7qjkrDsgvO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
  
<div class="video-container closr">
    <iframe src="https://www.youtube.com/embed/_PupZlKYYCU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS 代码

/* 通用响应式视频容器 */
.video-container {
    position: relative;
    width: 100%;
    max-width: 611px; /* 限制桌面端最大宽度 */
    padding-top: 56.25%; /* 16:9 固定宽高比 */
    margin: 0 auto;
}

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

/* 容器定位样式 */
.playing-cards{
    position: absolute;
    top: 107%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* 移动端占屏幕90%宽度 */
}

.closr{
    position: absolute;
    top: 185%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
}

/* 移动端适配调整 */
@media (max-width: 768px) {
    .playing-cards {
        top: 80%;
    }
    .closr {
        top: 150%;
    }
}

核心说明 #

• 响应式容器确保视频在任何屏幕尺寸下都保持正确比例，不会拉伸变形。
• 水平居中的定位逻辑避免了固定left值导致的移动端溢出问题。
• 媒体查询可根据你的实际页面布局，灵活调整容器的top值，防止视频重叠。

内容的提问来源于stack exchange，提问作者SUB_ROSA