如何实现弹窗视频在移动设备上的响应式适配

固定宽高的iframe无法适配小尺寸屏幕是很常见的问题，核心是用相对单位+比例容器替代固定尺寸设置，具体修改如下： #

第一步：修改HTML结构 #

移除iframe标签上写死的width="560" height="315"属性，给包裹iframe的父级容器新增响应式类名，修改后的相关代码：

<button type="button" class="action-oser" id="click-vlink2">
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 18v-12l10 6-10 6z" style="fill:#fff" /></svg>
</button>
<div id="video-modal2" style="display:none;">
    <div class="content-oser responsive-video-container">
        <iframe id="youtube2" src="https://www.youtube.com/embed/JexOJOssGwk?rel=0&enablejsapi=1&origin=https%3A%2F%2Fwww.apetito.co.uk&widgetid=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

你原来写的弹窗控制、关闭重置视频播放的JS逻辑不需要改动，可以直接保留。 #

第二步：添加响应式CSS #

把以下代码加到站点全局样式表中，同时适配模态框本身和视频比例：

/* 适配Magento模态框容器，移动端预留边距、限制最大宽度 */
.nursery-modal .modal-inner-wrap {
    width: 90% !important;
    max-width: 560px;
    margin: 1rem auto;
}
/* 16:9比例响应式视频容器 */
.responsive-video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 高度按宽度的56.25%生成，对应16:9的视频比例 */
    overflow: hidden;
}
/* 让iframe完全撑满比例容器 */
.responsive-video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

适配效果 #

• 桌面端：视频最大宽度保持560px，和原有展示效果完全一致
• 移动端：视频宽度自动适配模态框尺寸，高度按16:9比例自动计算，不会出现溢出、变形、横向滚动条的问题
• 所有屏幕尺寸下都能保持正常的展示比例，不需要针对特定设备写单独的适配规则

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