JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<div id="ytplayer"><img src="https://cdn.shopify.com/s/files/1/0616/1360/5029/files/perfectionist-blog.png" id="playbtn"></div>
<button id="unmutebtn">
Unmute
</button>
<button id="playbtn">
Play
</button>

CSS

#ytplayer {
  width: 100%;
  max-width: 1500px;
  min-height: 723px;
}

JavaScript

// Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  const playbtn = document.getElementById("playbtn");
   const unmutebtn = document.getElementById("unmutebtn");
  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  
 playbtn.addEventListener("click", function () {
   console.log('player clicked ********');

    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'fmvsh0M55_Y',
      playerVars: { autoplay: 1, mute: 1, controls: 1, origin: 'https://fiddle.jshell.net', modestbranding: 1, enablejsapi:1  },
      events: {
        'onReady': onPlayerReady
      }
    });
    player.h.attributes.sandbox.value = "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation";
    console.log('player', player);

 });
 
function onPlayerReady(event) {
    console.log('**** Player is ready', event.target);
    console.log('**** PlayerInfo', event.target.playerInfo);
    //event.target.unMute();
    event.target.setVolume(100); 
    event.target.playVideo()
}

 unmutebtn.addEventListener("click", function () {
     player.unMute();
 });
 
  playbtn.addEventListener("click", function () {
     player.playVideo();
 });