JS PLAYER - uses plyr.io and generates Youtube thumbs

video-player.js

/* + VIDEO PLAYER
  ======================================================================*/
var current_player = null;

app.videoPlayer = {
  init: function () {
    if (!document.querySelector(".js-player")) {
      // console.log('no-plyr');
      return;
    } else {
      //    app.videoPlayer.deferVideos();
      app.videoPlayer.YTPreConnect();
      app.videoPlayer.startPlyr();
    }
  },
  YTPreConnect: function () {
    //PRECONNECT TO YOUTUBE IMAGES
    var linkTag = document.createElement("link");
    linkTag.rel = "preconnect";
    linkTag.href = "https://img.youtube.com";
    //inject tag in the head of the document
    document.head.appendChild(linkTag);
  },
  //	loadJSCSS: function() {
  //		getCSS('css/plyr/plyr.css');
  //		getJS('js/vendor/plyr.js');
  //	},
  startPlyr: function () {
    var players = [];
    var YouTubeContainers = document.querySelectorAll(".js-player");
    // Iterate over every YouTube container you may have
    var loopYT = function loopYT() {
      var container = YouTubeContainers[i];
      //GET YT Thumbnail Image + Video Title
      var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
      //  console.log(viewportWidth);
      if (viewportWidth > 640) {

        var imageSource = "https://img.youtube.com/vi_webp/" + container.dataset.plyrEmbedId + "/maxresdefault.webp";
      } else {
        var imageSource = "https://img.youtube.com/vi_webp/" + container.dataset.plyrEmbedId + "/mqdefault.webp";
      }




      var ytUrl = "https://www.youtube.com/watch?v=" + container.dataset.plyrEmbedId + "";
      // Load the Thumbnail Image asynchronously
      var image = new Image();
      image.src = imageSource;
      // alt image
      fetch("https://noembed.com/embed?dataType=json&url=" + ytUrl).then(function (res) {
        return res.json();
      }).then(function (data) {
        return (image.alt = data.title);
      });
      //   image attributes
      image.width = "480";
      image.height = "360";
      image.classList.add('no-lh');
      //	image.loading = 'lazy'


      image.addEventListener("load", function () {
        container.appendChild(image);
        resizeYouTubeImage(image, window.baselineHeight);
      });

      function resizeAllYouTubeImages() {
        var images = document.querySelectorAll('.yt-block img');
        images.forEach(function(image) {
          resizeYouTubeImage(image, window.baselineHeight);
        });
      }

      window.addEventListener('resize', debounce(resizeAllYouTubeImages, 250));


      function resizeYouTubeImage(image, baselineHeight) {
        var imageHeight = image.offsetHeight;
      
       
        // Calculate the adjustment needed to align the bottom of the image with the next baseline grid.
        var multiplier = Math.ceil(imageHeight / baselineHeight);
        var adjustment = (multiplier * baselineHeight) - imageHeight;
        

        // Traverse up the DOM tree to find the parent with the .yt-block class
        var currentElement = image;
        while (currentElement && !currentElement.classList.contains('yt-block')) {
          currentElement = currentElement.parentElement;
        }
      
        // Apply the calculated adjustment to the .yt-block element
        if (currentElement) {
          currentElement.style.paddingBottom = adjustment + 'px';
        }
      }
      


      
        
      /* Edit by HH */
      //checking IOS Devices
      var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      //if IOS
      if (isIOS) {
        // console.log('detect IOS');
        getCSS(templateUrl + '/css/plyr/plyr.css');
        getJS(templateUrl + '/js/vendor/plyr.js').then(function () {
          //  console.log('JS LOADED');
          const imageObserver = new IntersectionObserver((entries, imgObserver) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                var plyr = container.getAttribute("data-plyr-embed-id"); //
                plyr = ".js-player[data-plyr-embed-id=" + plyr + "]";
                var player = new Plyr(plyr, {
                  youtube: {
                    //SEE YOUTUBE API: https://developers.google.com/youtube/player_parameters#Parameters
                    origin: window.location.host + '/',
                    iv_load_policy: 3,
                    modestbranding: 1,
                    playsinline: 1,
                    showinfo: 0,
                    rel: 0,
                    enablejsapi: 1,
                    noCookie: true,
                    autoplay: 0
                  }
                });
              }
            })
          });
          const arr = document.querySelectorAll('.js-player')
          arr.forEach((v) => {
            imageObserver.observe(v);
          })
          //		console.log('This is a IOS device');
        });
      } else { //if not IOS
        //console.log('This is Not a IOS device');
        //LOAD PLYR ON CLICK
        // When the user clicks on the container, load the embedded YouTube video
        container.addEventListener("click", function () {
          getCSS(templateUrl + '/css/plyr/plyr.css');
          getJS(templateUrl + '/js/vendor/plyr.js').then(function () {
            var plyr = container.getAttribute("data-plyr-embed-id"); //
            plyr = ".js-player[data-plyr-embed-id=" + plyr + "]";
            var player = new Plyr(plyr, {
              youtube: {
                //SEE YOUTUBE API: https://developers.google.com/youtube/player_parameters#Parameters
                origin: window.location.host + '/',
                iv_load_policy: 3,
                modestbranding: 1,
                playsinline: 1,
                showinfo: 0,
                rel: 0,
                enablejsapi: 1,
                noCookie: true
              }
            });
            player.on("ready", function () {
              player.play();
            }); // Attach Play Event
            player.on("play", function () {
              players.forEach(function (playerElement) {
                if (playerElement !== player && playerElement.playing) {
                  playerElement.pause();
                }
              });
            });
            // Save Player Instance
            players.push(player);
            // STOP Other Players
            players.forEach(function (player) {
              player.on("play", function () {
                player.elements.container.classList.add("player-expand");
                players.forEach(function (otherPlayer) {
                  if (otherPlayer !== player && otherPlayer.playing) {
                    otherPlayer.pause();
                  }
                });
                /**
                 * Pause when opening Lightbox
                 */
                var lightboxLinks = document.querySelectorAll("[class^='is-lightbox']");
                for (var i = 0; i < lightboxLinks.length; i++) {
                  lightboxLinks[i].addEventListener("click", function () {
                    player.pause();
                  });
                } // player.toggleControls('progress');
              });
              player.on("pause", function () {
                if (!player.seeking) {
                  player.elements.container.classList.remove("player-expand");
                }
              });
            });
          });
        });
      }
    };
    for (var i = 0; i < YouTubeContainers.length; i++) {
      var ytUrl;
      loopYT();
    }
  }
}