JSFiddle - React, Tailwind, and code Playground

by moongtook

HTML

<div>
    <div id="player"></div>
    <p id="trigger">
    여기에 마우스 오버하면 플레이
    </p>
</div>

JavaScript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '90',
    width: '160',
    videoId: 'P8_orZn51RI',
    playerVars: {
      //autoplay: 1,
      controls: 0,
      showinfo: 0,
      autohide: 1,
      volume:0,
      vq: 'small'},
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
    player.mute();
}

$(document).ready(function() {
	$('#trigger').mouseover(function() {
  	console.log("-----------")
  	player.playVideo();
  })
});