https://wxli.ai/assets/js/youtube-shorts-carousel.js

1(function() {
2      var ytReady = false;
3      var ytQueue = [];
4      var ytPlayers = {};
5      var $carousel;
6
7      if (window.YT && window.YT.Player) {
8        // The async iframe_api script can finish loading and fire its ready
9        // callback before this deferred script even runs (both scripts race
10        // independently), which otherwise leaves ytReady permanently false
11        // and every short stuck as a blank/black placeholder until refresh.
12        ytReady = true;
13      } else {
14        var prevYTReady = window.onYouTubeIframeAPIReady;
15        window.onYouTubeIframeAPIReady = function() {
16          if (prevYTReady) prevYTReady();
17          ytReady = true;
18          ytQueue.forEach(function(fn) { fn(); });
19          ytQueue = [];
20        };
21      }
22
23      function loadShort($slide, index) {
24        var $embed = $slide.find('.short-embed');
25        if (!$embed.length || ytPlayers[index]) return;
26        var videoId = $embed.data('videoid');
27        var id = 'shorts-yt-' + index;
28        if (!document.getElementById(id)) {
29          $embed.append('<div id="' + id + '"></div>');
30        }
31        function create() {
32          ytPlayers[index] = new YT.Player(id, {
33            videoId: videoId,
34            playerVars: { controls: 1, rel: 0, modestbranding: 1, playsinline: 1 },
35            events: {
36              onStateChange: function(e) {
37                if (e.data === YT.PlayerState.ENDED) {
38                  $carousel.slick('slickNext');
39                }
40              }
41            }
42          });
43        }
44        ytReady ? create() : ytQueue.push(create);
45      }
46
47      function unloadShort($slide, index) {
48        if (!ytPlayers[index]) return;
49        try { ytPlayers[index].destroy(); } catch(e) {}
50        delete ytPlayers[index];
51      }
52
53      document.addEventListener('DOMContentLoaded', function() {
54        $carousel = $('.shorts-carousel');
55        if (!$carousel.length) return;
56
57        $carousel.slick({
58          slidesToShow: 1,
59          slidesToScroll: 1,
60          autoplay: false,
61          arrows: true,
62          dots: true,
63          infinite: true,
64          adaptiveHeight: false
65        });
66
67        loadShort($carousel.find('.slick-current'), 0);
68
69        $carousel.on('beforeChange', function(e, slick, cur) {
70          unloadShort($(slick.$slides.get(cur)), cur);
71        });
72        $carousel.on('afterChange', function(e, slick, cur) {
73          loadShort($(slick.$slides.get(cur)), cur);
74        });
75      });
76    })();