Using Youtube iFrame for videos

youtube.html

<!-- topplayer is the div id we'll be referencing in JS to make an iframe here -->
<div id="topplayer"></div>

<script>
jQuery( document ).ready(function( $ ) {
    var tag = document.createElement( 'script' );
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName( 'script' )[0];
    firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
});

function onYouTubeIframeAPIReady() {
  //topplayer object that will be used throughout. 
  //I'll suggest that you don't use the object name as player as the same name is used default by youtube and may conflict 
  topplayer = new YT.Player('topplayer', {
	  height: '315',                //height of video
	  width: '560',                 //width of the video
	  videoId: ' #Id of your video or playlist# ',
	  events: {
		'onReady': onTopPlayerReady,
	  }
	});
}

function onTopPlayerReady(event) {
  event.target.playVideo();     //to run video as soon as player is ready
	topplayer.mute();             //to mute video once it starts running
}
</script>