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 
 * Optimzed by Google Bard
 */


function getYoutubeData(videoId) {
  let ytDataUrl = 'https://www.youtube-nocookie.com/oembed?format=json&url=http%3A//youtube.com/watch%3Fv%3D' + videoId;
  return fetch(ytDataUrl)
    .then(res => res.json())
    .catch(err => { console.log(err) });
}

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

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

    getYoutubeData(videoId)
      .then(out => document.getElementById(thisPlayerId).innerHTML = out.title.substr(0, 40))
      .catch(err => { console.log(err) });

    let div = document.createElement('div');
    div.setAttribute('data-id', videoId);
    div.appendChild(document.createElement('img')).src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
    
    let videoTitle = document.createElement('div');
    videoTitle.setAttribute('class', 'videotitle');
    videoTitle.setAttribute('id', thisPlayerId);
    videoTitle.appendChild(document.createTextNode(''));
    div.appendChild(videoTitle);

    let playButton=document.createElement('div');
    playButton.setAttribute("class", "play");
    div.appendChild(playButton); 
    
    div.onclick = function() { labnolIframe(this); };
    playerElements[n].appendChild(div);
  }
}

document.addEventListener('DOMContentLoaded', initYouTubeVideos);

YouTube embed in Privacy Enhanced mode

YouTube IFRAME embed for faster page loads in privacy enhanced mode
https://magnushelander.se/youtube-no-cookies-embed-privacy/

How to use

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