我怎样才能拥有一个带有 Iframe/Html5 视频和一个阅读更多按钮的页面，其 src 和 href 值可以在 javascript 的帮助下更改？

如何解决我怎样才能拥有一个带有 Iframe/Html5 视频和一个阅读更多按钮的页面，其 src 和 href 值可以在 javascript 的帮助下更改？

我的网站（博主）上有一个页面，我想在该页面上放置多个视频/iframe 和一个按钮以获取有关视频的更多信息。但是在一个页面上拥有如此多的视频/iframe 可能会影响网站的 SEO 和加载时间以及外观。

所以我希望页面上只有一个视频/iframe 和一个“阅读更多”按钮，其下方有更多导航链接，以便轻松导航到其他视频。

这是我的代码：

<!-- if there's a video -->
<video id="video-id">
<source src="" type="video/mp4">
</video>
<!-- if there's an iframe -->
<iframe class="responsive-video" src="" allowfullscreen scrolling="no" allow="encrypted-media">
<button class="read-more" href="">KNow More About This</button>
<hr style="opacity:0.2;">
<button class="btn-class" href="#" data-video="https://site.xyz/video-src.mp4" data-btn="https://site2.xyz/btn-href/">Video 1</button>
<!-- And Other Buttons Like This -->

你能告诉我在这种情况下可以使用的javascript吗？另外，我是 javascript 新手，所以请在回答中具体说明。

谢谢。

解决方法

只需单击“视频 1”按钮即可更改视频的 src 和锚点上的 href

function playVideo() {
  //Change video src
  document.getElementById("video-id").src = event.target.getAttribute('data-video')

  //Change anchor's href
  document.getElementById("read-more-btn").href = event.target.getAttribute('data-btn')

}

.read-more {
  text-align: center;
}

<video id="video-id">
  <source src="" type="video/mp4">
</video>
<div class="read-more">
  <a id="read-more-btn" href="">Know More About This</a>
</div>
<hr style="opacity:0.2;">
<button class="btn-class" onclick="playVideo()" href="#" data-video='https://www.w3schools.com/tags/movie.mp4' data-btn="https://site2.xyz/btn-href/" data-video="">Video 1</button>
<!-- And Other Buttons Like This -->