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

正如我在评论中所建议的，我创建了一个div，最初是隐藏的，它扮演着弹出模式的角色，当具有a的{{1}}标记时将显示该弹出窗口被点击。我对您的data-target="modal"代码进行了一些更改，将在答案中进行介绍。

过程：

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

最终结果：

Ps：我将提供一个可运行的代码段，但是由于Stack Overflow的某些限制，它可能无法正常运行。为此，我在CodePen上进行了工作DEMO，可以根据需要检查并使用该代码。

iframe

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>  <div id="modal" tabindex="-1"> <button type="button" data-dismiss="modal" class="close" title="close">×</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属性的a标签，必须具有一个等于“ modal”的href属性。
要在显示模式data-target时在视频上方显示标题，请添加一个div属性，该属性等于这些data-video-title标签上的某些文本。如果链接中没有a，则视频上方的标题将为“无标题”。
作为最后两点的说明，下面是一个链接示例，该链接将在单击时打开模式：data-video-title
所有视频链接（即<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>标签的href属性）必须是a链接（embed为一个例子）。因此，您必须使用YouTube https://www.youtube.com/embed/A1nRiiWYgZw下src下iframe的{{1}}的{{1}}中的链接。以下是一些图像来证明这一点：

为什么使用embed代替常规的share链接？

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

有关模式embed

的注释

为简单起见，我没有做任何动画作为打开/关闭效果，并且模态没有响应。
您可以按watch（退出）按钮关闭模式。
带有“十字”符号的按钮将放置在浏览器窗口的最右上角，以关闭单击时的模式。
模式div的标记必须保留才能正常使用。

为什么我不使用ESC而不是div？

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

希望我的回答使您更进一步。我在这里有任何进一步的解释。

如何从视频链接中单击并使其在下面的区域中播放？

1 个答案: