JSFiddle - React, Tailwind, and code Playground

by Ivan Melgrati

HTML

<div id="player"></div>

JavaScript

var player;
// This code loads the IFrame Player API code asynchronously. This is the Youtube-recommended script loading method
var tag = document.createElement("script");

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

//  This function is called by YouTube once the the API is ready.It creates an &lt;iframe&gt; and sets up the video player inside.
function onYouTubeIframeAPIReady() {
	player = new YT.Player("player", {
		height: "320",
		width: "320",
		videoId: "668nUCeBHyY",
		events: {
			// API event handlers
			onReady: onPlayerReady
		}
	});
}

// The API will call this function when the video player is ready (in this case, start playing the video).
function onPlayerReady(event) {
	event.target.playVideo();
}