https://pro-kaguya.com/assets/js/movie.js

1      let players = {};
2      let tabButtons;
3      let containers;
4
5      function onYouTubeIframeAPIReady() {
6        players.player1 = new YT.Player('player1', {
7          videoId: 'Jl9A9UxXGw8',
8          playerVars: { 'rel': 0 },
9          events: { 'onStateChange': onPlayerStateChange }
10        });
11        players.player2 = new YT.Player('player2', {
12          videoId: 'Jl9A9UxXGw8',
13          playerVars: { 'rel': 0 },
14          events: { 'onStateChange': onPlayerStateChange }
15        });
16        players.player3 = new YT.Player('player3', {
17          videoId: 'Jl9A9UxXGw8',
18          playerVars: { 'rel': 0 },
19          events: { 'onStateChange': onPlayerStateChange }
20        });
21        players.player4 = new YT.Player('player4', {
22          videoId: 'Jl9A9UxXGw8',
23          playerVars: { 'rel': 0 },
24          events: { 'onStateChange': onPlayerStateChange }
25        });
26      }
27
28      document.addEventListener('DOMContentLoaded', () => {
29        tabButtons = document.querySelectorAll('.tab-button');
30        containers = document.querySelectorAll('.video-container');
31
32        tabButtons.forEach(button => {
33          button.addEventListener('click', () => {
34            switchToTab(button.getAttribute('data-target'));
35          });
36        });
37      });
38
39      function switchToTab(targetId) {
40        tabButtons.forEach(btn => {
41          btn.classList.toggle('active', btn.getAttribute('data-target') === targetId);
42        });
43
44        containers.forEach(container => {
45          const player = container.querySelector('iframe');
46          if (player) {
47            const id = container.id.replace('video', 'player');
48            if (players[id] && players[id].pauseVideo) {
49              players[id].pauseVideo();
50            }
51          }
52          container.classList.toggle('active', container.id === targetId);
53        });
54      }
55
56      function onPlayerStateChange(event) {
57        if (event.data === YT.PlayerState.ENDED) {
58          // 再生終了時に次の動画へ
59          const currentId = event.target.getIframe().parentElement.id; // "video1" など
60          const currentIndex = Array.from(containers).findIndex(c => c.id === currentId);
61          const nextIndex = (currentIndex + 1) % containers.length;
62          const nextId = containers[nextIndex].id;
63          switchToTab(nextId);
64        }
65      }