Youtube Javascript API – Basic Example

March 31, 2017 12:57 pm by ATS Staff

The following example illustrates the basic controls of the Youtube Javascript API to Play/Pause and Stop the videos:

<title>Youtube Javascript API - Basic Example</title>

<a href="#" onclick="controls('video_id','playVideo');  return false;">Play/Resume</a> <br /> 
<a href="#" onclick="controls('video_id','pauseVideo'); return false;">Pause</a> <br /> 
<a href="#" onclick="controls('video_id','stopVideo');  return false;">Stop</a> <br />

<iframe id="video_id" width="640" height="390" frameborder="0" type="text/html" src="http://www.youtube.com/embed/JxE1VXZf9nY?rel=0&amp;showinfo=0&controls=0&enablejsapi=1"></iframe>

<script>
	function controls(frame_id, func, args) {
	    var iframe = document.getElementById(frame_id);
	    if (iframe) {
	        iframe.contentWindow.postMessage(JSON.stringify({
	            "event": "command",
	            "func": func,
	            "args": args || [],
	            "id": frame_id
	        }), "*");
	    }
	}
</script>