页面加载时视频模态框显示空白如何修正

问题原因 #

• 页面加载直接调用$('#videoModal3').modal('show')唤起模态框时，没有为iframe设置src属性，iframe默认加载空白内容
• 现有给iframe赋值视频地址的逻辑仅在点击a标签触发模态框时生效，直接调用show方法不会触发该逻辑
• 外部JS代码中使用的$videoSrc变量未定义，关闭模态框时会抛出JS错误，可能影响关联逻辑运行
• YouTube视频链接参数格式错误，两个参数之间用了?而不是&，会导致自动播放等参数不生效

修复方案 #

1. 修正body底部的唤起脚本，先给iframe赋值视频地址再唤起模态框：

<script>
// 获取a标签上存储的视频地址
const videoSrc = $('a[data-target="#videoModal3"]').data('src');
// 给iframe赋值播放地址
$('#video3').attr('src', videoSrc);
// 唤起模态框
$('#videoModal3').modal('show');
</script>

2. 修正外部JS中的关闭事件代码，直接清空iframe地址即可停止视频播放：

$('#videoModal3').on('hide.bs.modal',function(e){
  $("#video3").attr('src', '');
})

3. 修正a标签的data-src属性参数连接符，把?rel=0?autoplay=1改成?rel=0&autoplay=1：

<a title="Video promocional Salsas Harvest Of Love" data-toggle="modal" data-src="https://www.youtube.com/embed/nxLtwE0Rr0k?rel=0&autoplay=1" data-target="#videoModal3" class="text-color video-modal"><i class="ti-control-play bg-gradient hover-shadow btn-play mr-2"></i><span>Ver video</span></a>

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