lazy-x-youtube.js

let youtubeLoaded = '';

// Keeps track of if the iframe_api has been loaded or not or if there was any error.
// In case of error, we fall back to rendering iframes directly

function onYouTubeIframeAPIReady () {
  youtubeLoaded = 'loaded';
}

// Start playing the youtube video on desktops because the click came from our own orange
// play button.
function onYoutubeVideoPlayerReady (event) {
  if (!isMobile) {
    event.target.playVideo();
  }
}

function onPlayerStateChange (event) {
  // do something here if you are watching players for state change
}

// To know if the API has been loaded.
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

// This function is called and is passed the node that contains the embed data.
// We use jQuery on our websites for various functionalities. Thats why we are using
// jQuery here too, but it is not required and can also be done with vanilla js.

export function youtube ($node) {
  if (youtubeLoaded === '') {
    $.getScript('https://www.youtube.com/iframe_api')
      .fail(function (jqxhr, settings, exception) {
        youtubeLoaded = 'error';
      });
  }
  const staticWrapper = $node.find('.static-wrapper');
  if (!staticWrapper || staticWrapper.length < 1) {
    return;
  }
  const eid = $node.data('embed-id');
  
  // isMobile based on user-agent. We are able to play youtube videos
  // on desktops with single click because desktop browsers allow autoplay of videos.
  // But for mobile, two clicks are required to play a yt video with the general approach.
  // One click on our website's orange play button, which will first render youtube iframe,
  // and 2nd click on the rendered iframe's play button. This results in bad UX.
  // That's why we render the youtube player directly (but it does not start loading content)
  // instead of on click on play button

  if (isMobile) {
    const rect = {
      width: staticWrapper.width(),
      height: staticWrapper.height()
    };
    const player = new window.YT.Player(staticWrapper[0], {
      height: rect.width * 9 / 16,
      width: rect.width,
      videoId: eid,
      events: {
        onReady: onYoutubeVideoPlayerReady,
        onStateChange: onPlayerStateChange
      },
      playerVars: {
        modestbranding: 1,
        rel: 0,
        controls: 2,
        showinfo: 0,
        autoplay: 0
      }
    });
    return;
  }

  function imgClick (e) {
    staticWrapper.unbind('click');
    const rect = {
      width: staticWrapper.width(),
      height: staticWrapper.height()
    };
    if (youtubeLoaded !== 'loaded') {
      const iframe = $('<iframe>', {
        src: 'https://www.youtube.com/embed/' + eid + '?autoplay=1',
        width: rect.width,
        height: rect.height,
        frameborder: 0,
        allowFullscreen: 1,
        class: 'static-wrapper'
      });
      staticWrapper.replaceWith(iframe);
    } else {
      const player = new window.YT.Player(staticWrapper[0], {
        height: rect.width * 9 / 16,
        width: rect.width,
        videoId: eid,
        events: {
          onReady: onYoutubeVideoPlayerReady,
          onStateChange: onPlayerStateChange
        },
        playerVars: {
          modestbranding: 1,
          rel: 0,
          controls: 2,
          showinfo: 0,
          autoplay: 1
        }
      });
    }
  }
  
  // Add a click listener on the youtube image for desktop devices.
  staticWrapper.bind('click', imgClick);
  $node.attr(loadedAttr, 'true');
}