Html 如何使用播放视频的 iFrame 激活关闭按钮？

Question

在我之前的问题中，我询问了如何在 iFrame 中播放视频，并得到了答案：

但现在我面临另一个问题，我有一个 iFrame 和一个关闭 [ x ] 按钮 [ 灵感来自 : http://jsfiddle.net/EFbzY/1/ ]，但我不知道如何激活该关闭按钮关闭 iFrame，我站点末尾的 html 和脚本代码如下所示，它用于控制 iFrame :

<div id="modal" tabindex="-1">
    <button type="button" data-dismiss="modal" class="close" title="close">&times;</button>

  <div class="content">
    <h4 class="title"></h4>
    <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

  <div id="fade" class="black_overlay" onclick="closeLightBox()" style="display: block;">
    <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
      <h2>&times;</h2>
    </div>
  </div>
</div>

<script>
  var modal = document.getElementById('modal'), 
      closeBtn = modal.querySelector('close'), 
      ytVideo = modal.querySelector('.content .yt-video'), 
      title = modal.querySelector('.content .title'), 
      anchors = document.querySelectorAll('a[data-target="modal"]'), 
      l = anchors.length;

  for (var i = 0; i < l; i++)
  {
    anchors[i].addEventListener("click", function(e)
    {
      e.preventDefault();
      title.textContent = this.dataset.videoTitle || 'No title';
      ytVideo.src = this.href;
      modal.classList.toggle('is-visible');
      modal.focus();
    });
  }

  modal.addEventListener("keydown", function(e)
  {
    if (e.keyCode == 27)
    {
      title.textContent = '';
      ytVideo.src = '';
      this.classList.toggle('is-visible');
    }
  });

  closeBtn.addEventListener("click", function(e)
  {
    e.preventDefault();
    title.textContent = '';
    ytVideo.src = '';
    modal.classList.toggle('is-visible');
  });
</script>

样式代码 [位于页面顶部] 如下所示：

#modal {
            display: none;
            position: fixed;
            width: 100vw;
            height: 100vh;
            max-height: 100vh;
            top: 0;
            left: 0;
            background: rgba(24, 24, 24, .6);
            z-index: 999;
        }
        #modal .content {
            width: 55%;
            height: 65vh;
            margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
        }
        #modal .content .yt-video {
            display: block;
            width: 100%;
            height: calc(100% - 45px);
        }
        #modal .content .title {
            box-sizing: border-box;
            height: 45px;
            line-height: 23px;
            padding: 12px 4px;
            margin: 0;
            background: #007bff;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #modal .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border: 0;
            font-weight: bold;
            font-size: 24px;
            color: #fff;
            background: #666;
            cursor: pointer;
            transition: background .4s;
        }
        #modal .close:hover, #modal .close:active {
            background: #ef3658;
        }
        #modal.is-visible {
            display: flex;
        }

测试站点在线：http://gatecybertech.com/test

在网站的右上角，单击 "Videos" link 将带您进入该部分，单击视频后，iFrame 会打开并播放带有 [ x] 按钮在右上角，但它没有激活，如何修复它以关闭 iFrame 和视频？

Answer 1

OK，经过一番研究和实验，我终于搞定了。运行位于：http://gatecybertech.com/test later will be moved to the main site : http://gatecybertech.com

[1] 样式如下：

#modal {
            display: none;
            position: fixed;
            width: 100vw;
            height: 100vh;
            max-height: 100vh;
            top: 0;
            left: 0;
            background: rgba(24, 24, 24, .6);
            z-index: 999;
        }
        #modal .content {
            width: 55%;
            height: 65vh;
            margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
        }
        #modal .content .yt-video {
            display: block;
            width: 100%;
            height: calc(100% - 45px);
        }
        #modal .content .title {
            box-sizing: border-box;
            height: 45px;
            line-height: 23px;
            padding: 12px 4px;
            margin: 0;
            background: #007bff;
                  color: #fff;
                  text-align: center;
                  font-size: 26px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #modal .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 58px;
            height: 58px;
            line-height: 35px;
            text-align: center;
            border: 0;
            font-weight: bold;
            font-size: 26px;
            color: #fff;
            background: #366;
            cursor: pointer;
            transition: background .2s;
        }
        #modal .close:hover, #modal .close:active {
            background: #ef3658;

        }
        #modal.is-visible {
            display: flex;
        }

[2] Html 看起来像这样：

            <div class="tools-icon">
              <a href=https://www.youtube.com/embed/IgBIaZgoAQc?autoplay=1 target=_blank data-target="modal" data-video-title="Keypad Pins Easily Stolen"><img src=https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg width=170 height=110></a>
              <p class="tools-icon__text">Keypad Pins Easily Stolen</p>
            </div>

...

  <!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->

    <div id="modal" tabindex="-1">
      <div class="content">
        <h4 class="title"></h4>
        <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>

      <div class="black_overlay" onclick="closeLightBox()" style="display: block;">
        <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
          <a class="close" onclick = "return close_iFrame();"><h2>&times;</h2></a>
        </div>
      </div>
    </div>

[3] 脚本如下所示：

<script>
  var modal = document.getElementById('modal'), 
      closeBtn = modal.querySelector('close'), 
      ytVideo = modal.querySelector('.content .yt-video'), 
      title = modal.querySelector('.content .title'), 
      anchors = document.querySelectorAll('a[data-target="modal"]'), 
      l = anchors.length;

  for (var i = 0; i < l; i++)
  {
    anchors[i].addEventListener("click", function(e)
    {
      e.preventDefault();
      title.textContent = this.dataset.videoTitle || 'No title';
      ytVideo.src = this.href;
      modal.classList.toggle('is-visible');
      modal.focus();
    });
  }

  modal.addEventListener("keydown", function(e)
  {
    if (e.keyCode == 27)
    {
      title.textContent = '';
      ytVideo.src = '';
      this.classList.toggle('is-visible');
    }
  });
</script>

<script language="javascript" type="text/javascript">
  function close_iFrame()
  {
    var modal = document.getElementById('modal'), 
                ytVideo = modal.querySelector('.content .yt-video'); 
                ytVideo.src = '';
                modal.classList.toggle('is-visible');
  }
</script>

Html 如何使用播放视频的 iFrame 激活关闭按钮？

In Html how to activate a close button with an iFrame that plays video?

html

video

iframe

close-button