iframe player youtube onfinish event
- Published
- Reading time
- 3 min read
- Length
- 591 words
On this page
How to Use the onfinish Event with an iFrame YouTube Player#
If you want to add a YouTube video to your website, you can use an iFrame player. The player provides an easy way to embed videos on your website without worrying about the technical details. However, if you want to customize the player's behavior, you need to use JavaScript. In this article, we will show you how to use the onfinish event with an iFrame YouTube player.
Step 1: Add the iFrame Player to Your Website#
The first step is to add the iFrame player to your website. You can get the code from the YouTube website. Here is an example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'VIDEO_ID'
});
}
</script>You need to replace "VIDEO_ID" with the ID of the YouTube video you want to play.
Step 2: Define the onfinish Event#
The next step is to define the onfinish event. This event is triggered when the video ends. Here is an example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'VIDEO_ID',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
// Your code goes here
}
}
</script>In this example, we added the "events" property to the player object and defined the "onStateChange" event. We also defined the "onPlayerStateChange" function, which is called when the state of the player changes. If the state is "ENDED," we can execute our code.
Step 3: Add Your Code#
Finally, you can add your code to the "onPlayerStateChange" function. Here is an example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'VIDEO_ID',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
// Your code goes here
console.log('Video ended');
}
}
</script>In this example, we added a simple console.log statement to the "onPlayerStateChange" function. You can replace this with your own code. For example, you can display a message, hide the player, or redirect the user to another page.
Alternative Method: Use the YouTube Iframe API#
If you want more control over the player, you can use the YouTube iFrame API. This API allows you to interact with the player through JavaScript. Here is an example:
<div id="player"></div>
<script>
function onYouTubeIframeAPIReady() {
var player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'VIDEO_ID'
});
player.addEventListener('onStateChange', function(event) {
if (event.data == YT.PlayerState.ENDED) {
// Your code goes here
console.log('Video ended');
}
});
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>In this example, we used the "addEventListener" method to listen for the "onStateChange" event. When the event is triggered and the state is "ENDED," we can execute our code.
Conclusion#
Using the onfinish event with an iFrame YouTube player is easy. You just need to add the event listener and define your code. If you want more control over the player, you can use the YouTube iFrame API. With this API, you can interact with the player through JavaScript and customize its behavior.