UdaraAlwis/YoutubeIFramePlaybackControlPage.html

## YoutubeIFramePlaybackControlPage.html
<html>
    <!-- With a bit of help from Youtube API Docs -->
    <!–– https://developers.google.com/youtube/iframe_api_reference#Examples ––>
    <head></head>

    <body>
        <p id="statusText">loading...</p>

        <iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474f;"></iframe>

        <br />

        <a href="#" onclick="letMePlay()">Play</a>
        <a href="#" onclick="letMePause()">Pause</a>
        <a href="#" onclick="letMeStop()">Stop</a>

        <script if="iframe-demo" src="https://www.youtube.com/iframe_api"></script>

        <script type="text/javascript">
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player("existing-iframe-example", {
                    events: {
                        onReady: onPlayerReady,
                        onStateChange: onPlayerStateChange,
                    },
                });
            }

            function onPlayerReady(event) {
                // player ready
            }

            function onPlayerStateChange(event) {
                var playerStatus = event.data;

                if (playerStatus == -1) {
                    // unstarted
                    document.getElementById("statusText").innerHTML = "unstarted";
                } else if (playerStatus == 0) {
                    // ended
                    document.getElementById("statusText").innerHTML = "ended";
                } else if (playerStatus == 1) {
                    // playing
                    document.getElementById("statusText").innerHTML = "playing";
                } else if (playerStatus == 2) {
                    // paused
                    document.getElementById("statusText").innerHTML = "paused";
                } else if (playerStatus == 3) {
                    // buffering
                    document.getElementById("statusText").innerHTML = "buffering";
                } else if (playerStatus == 5) {
                    // video cued
                    document.getElementById("statusText").innerHTML = "video cued";
                }
            }

            function letMePlay() {
                player.playVideo();
            }

            function letMePause() {
                player.pauseVideo();
            }

            function letMeStop() {
                player.stopVideo();
            }
        </script>
    </body>
    <html></html>
</html>
	<html>
	<!-- With a bit of help from Youtube API Docs -->
	<!–– https://developers.google.com/youtube/iframe_api_reference#Examples ––>
	<head></head>

	<body>
	<p id="statusText">loading...</p>

	<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474f;"></iframe>

	<br />

	<a href="#" onclick="letMePlay()">Play</a>
	<a href="#" onclick="letMePause()">Pause</a>
	<a href="#" onclick="letMeStop()">Stop</a>

	<script if="iframe-demo" src="https://www.youtube.com/iframe_api"></script>

	<script type="text/javascript">
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player("existing-iframe-example", {
	events: {
	onReady: onPlayerReady,
	onStateChange: onPlayerStateChange,
	},
	});
	}

	function onPlayerReady(event) {
	// player ready
	}

	function onPlayerStateChange(event) {
	var playerStatus = event.data;

	if (playerStatus == -1) {
	// unstarted
	document.getElementById("statusText").innerHTML = "unstarted";
	} else if (playerStatus == 0) {
	// ended
	document.getElementById("statusText").innerHTML = "ended";
	} else if (playerStatus == 1) {
	// playing
	document.getElementById("statusText").innerHTML = "playing";
	} else if (playerStatus == 2) {
	// paused
	document.getElementById("statusText").innerHTML = "paused";
	} else if (playerStatus == 3) {
	// buffering
	document.getElementById("statusText").innerHTML = "buffering";
	} else if (playerStatus == 5) {
	// video cued
	document.getElementById("statusText").innerHTML = "video cued";
	}
	}

	function letMePlay() {
	player.playVideo();
	}

	function letMePause() {
	player.pauseVideo();
	}

	function letMeStop() {
	player.stopVideo();
	}
	</script>
	</body>
	<html></html>
	</html>