https://www.portoseguro.org.br/resources/js/youtube.js

1function ytAddToDOM(item) {
2  const homeVideos = document.querySelector('.home-videos');
3
4  const videoId = item.contentDetails.videoId;
5
6  let homeVideo = document.createElement('div');
7  homeVideo.classList.add('home-video');
8  homeVideo.dataset.videoId = videoId;
9
10  let homeVideoIframe = document.createElement('div');
11  homeVideoIframe.classList.add('home-video__iframe');
12
13  homeVideo.appendChild(homeVideoIframe);
14  homeVideos.appendChild(homeVideo);
15}
16
17function ytInitVideo(item) {
18  const videoId = item.contentDetails.videoId;
19
20  const homeVideoIframe = document.querySelector('[data-video-id="' + videoId + '"] .home-video__iframe')
21
22  const player = new YT.Player(homeVideoIframe, {
23    videoId: videoId,
24    width: '288',
25    height: '153',
26    playerVars: {
27      rel: 0,
28      showinfo: 0,
29    },
30  });
31
32  if (window.innerWidth > 370) {
33    player.setSize('352', '198')
34  }
35
36  if (window.innerWidth > 420) {
37    player.setSize('368', '207')
38  }
39
40  if (window.innerWidth > 520) {
41    player.setSize('480', '270')
42  }
43
44  if (window.innerWidth > 767) {
45    player.setSize('640', '360')
46  }
47
48}
49
50function ytInitSlider() {
51  const homeVideos = document.querySelector('.home-videos');
52  const arrorLeft = document.querySelector('.home-videos__arrow--left');
53  const arrorRight = document.querySelector('.home-videos__arrow--right');
54
55  let pageDots = true
56
57  if (window.innerWidth > 767) {
58    pageDots = false
59  }
60
61  const flk = new Flickity(homeVideos, {
62    pageDots: pageDots,
63    groupCells: 1,
64    initialIndex: 1,
65    prevNextButtons: false
66  });
67
68  arrorLeft.addEventListener('click', function () {
69    flk.previous();
70  });
71
72  arrorRight.addEventListener('click', function () {
73    flk.next();
74  });
75}
76
77function ytExecute() {
78  const PLAYLIST_ID = 'UUMmqf8pfU1oqHV_myaLMqzg';
79  const MAX_RESULTS = 6;
80
81  return gapi.client.youtube.playlistItems.list({
82    "part": [
83      "id,contentDetails,snippet"
84    ],
85    "maxResults": MAX_RESULTS,
86    "playlistId": PLAYLIST_ID
87  })
88    .then(function (response) {
89      const result = response.result;
90      const items = result.items;
91
92      for (let i = 0; i < items.length; i++) {
93        const item = items[i];
94
95        ytAddToDOM(item);
96        ytInitVideo(item);
97      }
98
99      ytInitSlider();
100    }, function (err) {
101      console.error("YouTube error", err);
102    });
103}
104
105function ytReady() {
106  const API_KEY = "AIzaSyAVd4LUq4rB9INCdSucOdWm80T939erK9s";
107
108  gapi.client.init({
109    'apiKey': API_KEY,
110    'discoveryDocs': ['https://youtube.googleapis.com/$discovery/rest'],
111  }).then(function () {
112    ytExecute();
113  });
114}
115
116function ytMain() {
117  document.addEventListener('YouTubeIframeAPIReady', function (event) {
118    const homeVideos = document.querySelector('.home-videos');
119
120    if (homeVideos) gapi.load('client', ytReady);
121  });
122}
123
124document.addEventListener('DOMContentLoaded', ytMain);