仅用JS实现点击模态框内图片弹出带视频iframe的功能问询

你可以按以下方案修改原有代码，实现点击模态框内图片弹出视频iframe的效果：

首先修改HTML结构，在缩略图上新增自定义属性存储视频地址，同时在模态框内新增隐藏的iframe元素：

<div class="kitchen">
    <!-- 新增data-video属性，值替换为你的实际视频播放地址 -->
    <img class="myImg" src="images/keuken.jpg" alt="keuken" data-video="你的视频地址">
</div>

<div id="myModal" class="modal">
    <span class="close"> &times</span>
    <img class="modal-content" id="img">
    <!-- 新增视频iframe，默认隐藏 -->
    <iframe class="modal-content modal-video" id="videoIframe" frameborder="0" allowfullscreen></iframe>
</div>

补充CSS样式，适配视频iframe的显示效果：

.myImg
{
    cursor: pointer;
    width: 100%;  
}

.modal
{
    display: none;
    position: fixed;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0, 0.85);
}

.modal-content
{
    margin: auto;
    display: block;
    width: 100%;
    max-width: 800px;
    animation-name: zoom;
    animation-duration: 0.6s;
}
/* 新增iframe样式 */
.modal-video {
    display: none;
    height: 450px;
}

修改JS逻辑，新增模态框图片点击事件和视频开关逻辑：

var modal = document.getElementById("myModal");
var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img");
var videoIframe = document.getElementById("videoIframe");
var currentVideoUrl = '';

// 优化原有遍历逻辑，避免for in遍历到原型链属性导致报错
for ( var e = 0; e < img.length; e++ ) {
  img[e].onclick = function() {
    modal.style.display = "block";
    // 打开模态框时默认显示图片，隐藏视频
    modalImg.style.display = "block";
    videoIframe.style.display = "none";
    modalImg.src = this.src;
    currentVideoUrl = this.getAttribute('data-video');
  }
}

// 点击模态框内的图片切换为视频
modalImg.onclick = function() {
  if (currentVideoUrl) {
    modalImg.style.display = "none";
    videoIframe.style.display = "block";
    videoIframe.src = currentVideoUrl;
  }
}

var exit = document.getElementsByClassName("close")[0];

exit.onclick = function() {
  modal.style.display = "none";
  // 关闭模态框时清空iframe地址，避免视频后台继续播放
  videoIframe.src = '';
}

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