JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen></iframe>

	<button id="play">Click to Play Video</button>
	<button id="pause">Click to Pause Video</button>

JavaScript

$(function(){

				var yt_int, yt_players={},
				    initYT = function() {
				        $(".ytplayer").each(function() {
				            yt_players[this.id] = new YT.Player(this.id);
				        });
				    };

				$.getScript("//www.youtube.com/player_api", function() {
				    yt_int = setInterval(function(){
				        if(typeof YT === "object"){
				            initYT();
				            clearInterval(yt_int);
				        }
				    },500);
				});

				$('#play').on('click', function(){
					yt_players['player1'].playVideo();
				});

				$('#pause').on('click', function(){
					yt_players['player1'].pauseVideo();
				});

				

			});