Code for changing youtube thumbnail

youtube.css

.showVideo{
  display: block !important;
}

youtube.html

                <div class="col-md-12 text-center">
                    <div class="col-md-12 text-center my-auto"
                    onclick="playVideo(this, 'myvideo')">
                        <img id="oeaImage" src="{{site.baseurl}}/assets/imgs/video_1.png" alt="" width="100%" height="500">
                        <img 
                        onmouseover="changeYoutubeIconToRed()"
                        onmouseout="changeYoutubeIconToBlack()"
                        id="youtubeIcon" src="../assets/imgs/youtube_black.png" alt="" height="90" width="auto">
                    </div>
                    <iframe 
                    style="display: none;" id="myvideo" width="100%" height="500" 
                      src="https://www.youtube-nocookie.com/embed/zzDoPVIgfso?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>

youtube.js

function changeYoutubeIconToRed() {
  var youtubeIcon = document.getElementById('youtubeIcon');
  youtubeIcon.src = "../assets/imgs/youtube_red.png"
}

function changeYoutubeIconToBlack() {
  var youtubeIcon = document.getElementById('youtubeIcon');
  youtubeIcon.src = "../assets/imgs/youtube_black.png"
}

function playVideo(element, id) {
  element.style.display = 'none';
  document.getElementById(id).classList.add('showVideo');
  let src = document.getElementById(id).src
  document.getElementById(id).src = src.replace('autoplay=0', 'autoplay=1');

  // this function ckecks if the iframe has been clicked and pauses the video
  var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        element.style.display = 'block';
        document.getElementById(id).classList.remove('showVideo');
        let src = document.getElementById(id).src
        document.getElementById(id).src = src.replace('autoplay=1', 'autoplay=0');
    }
  }, 100);
}