设置嵌入YouTube视频的Bootstrap模态框宽高的方法

之前设置max-width不生效的原因 #

Bootstrap默认给.modal-dialog类预设了不同响应式断点下的固定max-width值，自定义样式如果选择器权重不够、没有覆盖默认宽度规则，就会被框架默认样式覆盖。同时模态框默认的边框、内边距会打破内部16:9视频容器的比例计算，导致高度适配异常。

可行实现方案 #

直接添加以下CSS代码即可，选择器绑定了对应模态框ID，权重足够覆盖Bootstrap默认样式：

#MainV3_VideoModal .modal-dialog {
  /* 模态框宽度占屏幕宽度85% */
  width: 85%;
  max-width: 85vw;
  /* 保留默认上下边距，避免模态框贴顶 */
  margin: 1.75rem auto;
}

/* 清除默认边框、内边距，避免比例错位 */
#MainV3_VideoModal .modal-content {
  border: none;
}
#MainV3_VideoModal .modal-body {
  padding: 0;
}

实现逻辑说明 #

• 同时设置width:85%和max-width:85vw，兼容不同浏览器的视口宽度计算规则，不会出现小屏横向溢出问题
• 清除模态框内容区、主体区的默认边框和内边距，消除冗余尺寸对比例计算的影响
• 原有代码中使用的embed-responsive embed-responsive-16by9是Bootstrap内置的16:9比例容器类，外层模态框宽度固定后，内部iframe会自动计算匹配的高度，不需要额外给模态框设置固定高度。

可选优化（关闭模态框自动停播） #

如果需要关闭模态框时自动停止视频播放，可以添加以下JS代码：

const videoModal = document.getElementById('MainV3_VideoModal')
const videoFrame = document.getElementById('MainV3_Video')
const frameSrc = videoFrame.src
videoModal.addEventListener('hidden.bs.modal', () => {
  videoFrame.src = ''
  videoFrame.src = frameSrc
})

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