YouTube IFRAME embed for faster page loads in privacy enhanced mode

Light YouTube Embed.md

YouTube IFRAME embed for faster page loads in privacy enhanced mode

Documentation: https://magnushelander.se/youtube-no-cookies-embed-privacy/

light-yt.css

/*
 * Light YouTube Embeds by @labnol
 * Credit: https://www.labnol.org/
 * Video title oauth added by @kmhelander
 */
 
 .youtube-player {
    position: relative;
    aspect-ratio: 16 / 9;  /* Modern browsers https://caniuse.com/mdn-css_properties_aspect-ratio */
    width: 100%;
    overflow: hidden;
    background: #000;
    margin: 5px;
  }

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

/* Poster image */
.youtube-player img {  
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

.youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

/* Play button on poster image */
.youtube-player .play {
    height: 179px;
    width: 179px;
    left: 50%;  
    margin-top: 30%; 
    position: relative; 
    background: url('../images/yt-play5-sq.png') no-repeat;
    cursor: pointer;
    transform: translate(-50%, -50%);   /* Responsive... */
  }

.youtube-player .videotitle {  
    position: absolute;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    color: white;
    text-shadow: 1px 1px black;
    left: 10px;
    top: 10px;
  }

light-yt.js

/*
 * Light YouTube Embeds by @labnol
 * Credit: https://www.labnol.org/
 * Title from YT oauth by @kmhelander 
 */

function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute(
      'src',
      'https://www.youtube-nocookie.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'  // No Cookie URL...
    );
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute(
      'allow',
      'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
    );
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName('youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;

      // YouTube OEMBED to retrieve title.
      // title, author_name, author_url available in JSON response
      let ytDataUrl = 'https://www.youtube-nocookie.com/oembed?format=json&url=http%3A//youtube.com/watch%3Fv%3D' + videoId;
      
      // fetch() is async, each player on page must have unique ID
      let thisPlayerId = "playerid-" + n.toString();

      // Fetch the JSON from Youtube and write title in TextNode element - truncated to 30 char
      fetch(ytDataUrl)
      .then(res => res.json())
      .then(out =>
      document.getElementById(thisPlayerId).innerHTML = out.title.substr(0,30) + "....")
      .catch(err => { console.log(err) });

      // Write max size poster image from ytimg.com in an IMG element 
        
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/maxresdefault.jpg'.replace(
        'ID',
        videoId
      ); 
      div.appendChild(thumbNode);

      // Create blank TextNode for title from fetch() - class videotitle
      
      var videoTitle = document.createElement('div');
      var titleNode = document.createTextNode(' ');
      videoTitle.setAttribute('class', 'videotitle');
      videoTitle.setAttribute('id', thisPlayerId);
      videoTitle.appendChild(titleNode);
      div.appendChild(videoTitle);

      // Create clickable button overlay on poster image
      // Stylesheet sets play button image in .play class
        
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

// Wait for content, then create all DIV youtube-player on page
document.addEventListener('DOMContentLoaded', initYouTubeVideos);

sample.html

<div class="youtube-player" data-id="sXiRZhDEo8A"></div>