やりたいこと

youtube動画をサイトに埋め込み
オートプレイ（PC・SPともに）
PCは音声あり
一本の動画で「chapter01」「chapter02」など、任意の場所へスキップできる

やってみたこと

スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので
参照サイトを見ながら、chapter01～03の設定はできました。

▼参照サイト
https://qiita.com/pecooh/items/210d29d26e982e169a7a

解決したいこと

★自動再生できるようにしたい★
・ページ表示時に配置されている一番最初の動画が自動再生されない。
・Chapter01、Chapter02…等のリンクをクリックすると動画が指定の秒数までスキップはするが、再生ボタンを押さないと再生されない。

こちらを解決するにはどうしたら良いでしょうか

コード

html
1<html>
2  <head>
3    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
4    <script src="https://www.youtube.com/iframe_api"></script>
5  </head>
6
7  <body>
8    <div class="container">
9      <div id="youtube"></div>
10    </div>
11    <!-- 切り替えボタン -->
12    <ul class="youtube_button">
13      <li>
14        <button id="50">Chapter01（50seconds）</button>
15      </li>
16      <li>
17        <button id="200">Chapter02（200seconds）</button>
18      </li>
19      <li>
20        <button id="400">Chapter03（400seconds）</button>
21      </li>
22    </ul>
23  </body>
24  <script src="pt05.js"></script>
25</html>

javascript
1    // iframeの初期読み込み
2    let player;
3    window.onYouTubeIframeAPIReady = () => {
4      player = new YT.Player("youtube", {
5        height: "450",
6        width: "800",
7        videoId: "M7lc1UVf-VE",
8        playerVars: {
9          autoplay: 1,
10          controls: 0,
11          rel: 0,
12          playsinline: 1
13        },
14        events: {
15        }
16      });
17    };
18
19    // buttonクリック時
20    $(".youtube_button li").on("click", e => {
21      $(".youtube_button li").removeClass("active");
22      // クリックしたボタンにactiveクラスをつける
23      e.target.classList.add("active");
24      // iframeの動画を差し替える
25      player.cueVideoById({
26        videoId: `M7lc1UVf-VE`,
27        startSeconds: `${e.target.id}`
28      });
29    });

当方、jsについては初心者のため、どうしたら解決するのか全くわからず途方にくれております。
お手数ですが、解決方法をご教示いただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

自己解決しました。

最初の動画のオートプレイは諦めました。

他にもっといい方法があるかもしれませんが、とりあえずやりたいことは出来たので良しとしたいと思います！

html
1<div id="player"></div><br>
2<ul>
3  <li id="player00">最初から</li>
4  <li id="player01">chapter01</li>
5  <li id="player02">chapter02</li>
6  <li id="player03">chapter03</li>
7</ul>

javaScript
1  const tag = document.createElement('script');
2  tag.src = "https://www.youtube.com/player_api";
3  const firstScriptTag = document.getElementsByTagName('script')[0];
4  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
5
6  let player;
7  function onYouTubePlayerAPIReady() {
8    player = new YT.Player('player', {
9      height: '450',
10      width: '800',
11      videoId: 'M7lc1UVf-VE',
12      playerVars: {
13          autoplay: 1,
14          controls: 0,
15          rel: 0,
16          playsinline: 1
17			}
18    });
19  }
20  
21var chapter00 = document.getElementById('player00');
22var chapter01 = document.getElementById('player01');
23var chapter02 = document.getElementById('player02');
24var chapter03 = document.getElementById('player03');
25
26chapter00.addEventListener('click', function() {
27    player.loadVideoById({'videoId': 'M7lc1UVf-VE','startSeconds': 1});
28}, false);
29
30chapter01.addEventListener('click', function() {
31    player.loadVideoById({'videoId': 'M7lc1UVf-VE','startSeconds': 58});
32}, false);
33
34chapter02.addEventListener('click', function() {
35    player.loadVideoById({'videoId': 'M7lc1UVf-VE','startSeconds': 279});
36}, false);
37
38chapter03.addEventListener('click', function() {
39    player.loadVideoById({'videoId': 'M7lc1UVf-VE','startSeconds': 760});
40}, false);
41