<iframe>内に指定した時間から再生できる動画を入れて切り替えたい

Question

自社のサイトで、ワードプレスにYoutube動画を入れてページを作成しています。
動画を入れてるコードは次の通りです。

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/aaaaaaa" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

動画のすぐ下には、目次をつけています。

<ul class="mokuji">
<li class="title">【目次】</li>
<li>00:00～ オープニング～自己紹介</li>
<li>07:30～ 本講義はじまり</li>
<li>14:17～ 目次01</li>
<li>16:50～ 目次02</li>
<li>22:32～ 目次03</li>
<li>26:40～ 目次04</li>
</ul>

この目次テキストに、指定した時間からのリンクをつけたいと思い、Youtubeから開始時間つきのタグを
取得しました。

https://www.youtube.com/embed/aaaaaaa?start=450

JavascriptやjQueryで実装できると思っていたのですが、社内のコーダーからは、
「iframe内の要素を書き換えることはできるが、idで指定したものしかできないことがわかった」という返事が
返ってきました。

他に実現方法がないか、ご教示いただきたく、投稿しました。

もし、いい方法があれば教えてください。

Answer 1

document.getElementById('player').src = 'https://www.youtube.com/embed/{id}?start={time}&autoplay=1

こんな感じでiframeのsrcを変更して再読み込みさせてはどうでしょうか

Comments

[midori_saki]

ご教示いただきありがとうございました。
いただいた内容での切り替え、試してみるようにします！