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

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>