如何从视频链接中点击并让它在下面的区域播放？

Question

我的网站上有几个视频，它们的列表如下：

<ul id="toolsButtons" class="ahrefs__tools__nav">
  <li>
    <div class="tools-icon">
      <a href=https://www.youtube.com/watch?v=A1nRiiWYgZw target=_blank><img src=Traditional_vs_GATE_s.PNG></a>
      <use xlink:href="#keyword-research-icon"></use>
      <p class="tools-icon__text">Traditional vs GATE</p>
  </li>
  <li>
    <div class="tools-icon">
      <a href=https://www.youtube.com/watch?v=wLHfGQlLqtE target=_blank><img src=Guess_GATE_Password.PNG></a>
      <use xlink:href="#competitive-analysis-icon"></use>
      <p class="tools-icon__text">GATE Passcode</p>
    </div>
  </li>
  <li>
    <div class="tools-icon">
      <a href=https://www.youtube.com/watch?v=5tAGemIvUeI target=_blank><img src=GATE_Demo.PNG></a>
      <use xlink:href="#keyword-research-icon"></use>
      <p class="tools-icon__text">How GATE Works</p>
    </div>
  </li>
</ul>

如何在列表下方创建一个观看区域，以便在点击视频链接时在该观看区域播放？

Answer 1

正如我在 cmets 中建议的那样，我创建了一个 div，最初是隐藏的，它扮演弹出模式的角色，当单击具有 data-target="modal" 的 a 标记时将显示该模式。我对您的 HTML 代码进行了一些更改，我将在答案中介绍它们。

流程：

当您单击具有data-target="modal" 的链接（具有视频的href 属性的链接时，我在此处为每个链接添加了data-target="modal"，只是为了将这些链接与可能存在的其他链接区分开来在页面中）我给它id="modal" 的模态div 将显示并填充适当的视频。因此，每次点击链接时，其href 属性将被放置在将托管视频的iframe 标记的src 属性中。

最终结果：

Ps：我将提供一个可运行的 sn-p，但是由于 Stack Overflow 的一些限制，它可能无法按预期工作。为此，我在 CodePen 上创建了一个可用的 DEMO，如果需要，您可以检查和使用代码。

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');
		});

#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;
		}

<ul id="toolsButtons" class="ahrefs__tools__nav">
	  <li>
	    <div class="tools-icon">
	      <a href="https://www.youtube.com/embed/A1nRiiWYgZw" target="_blank" data-target="modal" data-video-title="Traditional vs GATE"><img src="Traditional_vs_GATE_s.png"></a>
	      <use xlink:href="#keyword-research-icon"></use>
	      <p class="tools-icon__text">Traditional vs GATE</p>
	  </li>
	  <li>
	    <div class="tools-icon">
	      <a href="https://www.youtube.com/embed/wLHfGQlLqtE" target="_blank" data-target="modal" data-video-title="GATE Passcode"><img src="Guess_GATE_Password.png"></a>
	      <use xlink:href="#competitive-analysis-icon"></use>
	      <p class="tools-icon__text">GATE Passcode</p>
	    </div>
	  </li>
	  <li>
	    <div class="tools-icon">
	      <a href="https://www.youtube.com/embed/5tAGemIvUeI" target="_blank" data-target="modal" data-video-title="How GATE Works"><img src="GATE_Demo.png"></a>
	      <use xlink:href="#keyword-research-icon"></use>
	      <p class="tools-icon__text">How GATE Works</p>
	    </div>
	  </li>
	</ul>
  <!-- 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">
		<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>

必须在HTML 代码中完成的更改：

• 每个包含href 属性的a 标记都必须有一个等于“modal”的data-target 属性。
• 要在显示模态div 时在视频上方显示标题，请添加一个data-video-title 属性，该属性等于这些a 标记上的某些文本。如果链接上没有 data-video-title，则视频上方显示的标题将为“无标题”。
• 作为最后 2 点的说明，以下是单击时将打开模式的链接示例：<a href="https://www.youtube.com/embed/A1nRiiWYgZw" target="_blank" data-target="modal" data-video-title="Traditional vs GATE"><img src="Traditional_vs_GATE_s.png"></a>
• 所有视频链接（即a 标签的href 属性）必须是embed 链接（以https://www.youtube.com/embed/A1nRiiWYgZw 为例）。因此，您必须使用 YouTube 上 embed 部分下的 iframe 中的 src 链接。这里有一些图片可以证明这一点：

为什么使用embed 而不是常规的watch 链接？

防止跨域策略限制。简单来说，默认情况下，服务器不允许其他服务器/站点异步获取它们的文件。

模态div的注意事项

• 为简单起见，我没有制作任何动画作为打开/关闭效果，并且模态没有响应。
• 您可以按ESC（Escape）按钮关闭模态框。
• 将在浏览器窗口的右上角放置一个带有“十字”标志的按钮，以便在单击时关闭模式。
• 必须保留模式 div 的标记才能按预期工作。

为什么我不用data-href 而不是href？

我坚持使用链接上的href 保证即使JavaScript 被禁用，该视频仍可访问，如果是这样，它将被重定向到该视频。

希望我的回答能让你更进一步。我在这里寻求任何进一步的解释。