WordPress Lazy Load Youtube Videos

lazy_load_youtube_video.php

<?php
/*
Plugin Name:  Lazy Youtube Video
Version: 1.5
Description: Lazy Load videos from Youtube on WordPress.
Author: Alfredo Galano Loyola
Author URI: https://nomcomaspin.ga/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lazy-youtube-video
*/
add_action( 'wp_head', 'lazy_youtube_video_css');
function lazy_youtube_video_css() {
    ?>
<style>
    .youtube-player{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}.youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.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:.4s all;-moz-transition:.4s all;transition:.4s all}.youtube-player img:hover{-webkit-filter:brightness(75%)}
    .lzyt-play { 
      background: red;
      border-radius: 50% / 10%;
      color: #FFFFFF;
      font-size: 1em; /* change this to change size */
      height: 72px;
      left:45%;
      top:42%;
      position: absolute;
      text-align: center;
      text-indent: 0.1em;
      transition: all 150ms ease-out;
      width: 72px;
      cursor:pointer;
    }
    
    .lzyt-play:hover {
      background: darkorange;
    }
    
    .lzyt-play::before { 
      background: inherit;
      border-radius: 5% / 50%;
      bottom: 9%;
      content: "";
      left: -5%;
      position: absolute;
      right: -5%;
      top: 9%;
    }
    
    .lzyt-play::after {
      border-style: solid;
      border-width: 1em 0 1em 1.732em;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
      content: ' ';
      font-size: 0.75em;
      height: 0;
      margin: -1em 0 0 -0.75em;
      top: 50%;
      position: absolute;
      width: 0;
    }
    @media only screen and (max-width: 480px) {
    .lzyt-play {
      left: 40%;
      top: 30%;
    }
    }
    </style>;
<?php
}
add_action( 'wp_footer', 'lazy_youtube_video_js');
function lazy_youtube_video_js() {
?>
    <script>
        function labnolIframe(div) {
          var iframe = document.createElement("iframe");
          iframe.setAttribute(
            "src",
            "https://www.youtube.com/embed/" + div.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"
            ),
            div.parentNode.replaceChild(iframe, div);
        }
        function initYouTubeVideos() {
          for (
            var playerElements = document.getElementsByClassName("youtube-player"),
              n = 0;
            n < playerElements.length;
            n++
          ) {
            var videoId = playerElements[n].dataset.id,
            hd_image = playerElements[n].dataset.hd,
            div = document.createElement("div");
            div.setAttribute("data-id", videoId);
            var thumbNode = document.createElement("img");
            console.log(hd_image);
            var image_background = "//i.ytimg.com/vi/ID/hqdefault.jpg";
            if (hd_image =="yes") {
                image_background = "//i.ytimg.com/vi/ID/maxresdefault.jpg";
            } 
            (thumbNode.src = image_background.replace(
              "ID",
              videoId
            )),
              div.appendChild(thumbNode);
            var playButton = document.createElement("div");
            playButton.setAttribute("class", "lzyt-play"),
              div.appendChild(playButton),
              (div.onclick = function () {
                labnolIframe(this);
              }),
              playerElements[n].appendChild(div);
          }
        }
        document.addEventListener("DOMContentLoaded", initYouTubeVideos);
    </script>
      
<?php
}
add_shortcode( 'lazy_youtube_video', 'lazy_youtube_video' );

function lazy_youtube_video_init(){
    function lazy_youtube_video($atts) {
        $a = shortcode_atts( array(
            'id' => 'xxxxxx',
            'class' => 'youtube-player',
            'hd' => 'no',
            ), $atts );
        $output = '<div class="'.$a['class'].'" data-id="'.$a['id'].'" data-hd="'.$a['hd'].'"></div>';
        return $output;
    }
}
add_action('init', 'lazy_youtube_video_init');

The idea comes from here:
https://www.labnol.org/internet/light-youtube-embeds/27941/
WordPress Demo:
https://myblank.tempurl.host/lazy-youtube-video/

updated to use the full CSS button for play.