Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save UdaraAlwis/5162197068e53b917c430caf91cf515a to your computer and use it in GitHub Desktop.
Save UdaraAlwis/5162197068e53b917c430caf91cf515a to your computer and use it in GitHub Desktop.
Controlling the playback of Youtube iFrame video from Javascript...
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment