How to remove Related Videos on embedded Youtube videos and other tips to keep your audience on your website

How to remove Related Videos on embedded Youtube videos?

To remove related videos from an embedded YouTube video, you can add a parameter to the end of the embed code. Here's how to do it:

Find the YouTube video you want to embed on the YouTube website.
Click the "Share" button below the video player.
Click the "Embed" button.
Under the embed code, you'll see a checkbox that says "Show suggested videos when the video finishes". Uncheck this box.
Copy the embed code.
Alternatively, you can manually add a parameter to the end of the embed code to remove related videos. The parameter is "?rel=0". Here's an example of what the embed code should look like:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?rel=0" frameborder="0" allowfullscreen></iframe>

Replace "VIDEO_ID" with the actual ID of the YouTube video you want to embed.

By adding "?rel=0" to the end of the URL in the embed code, you're telling YouTube not to show related videos when the video finishes playing.

Is there an alternative way to identify when a YouTube embedded video has finished playing, and then redirect the viewer to a different webpage?

Yes, there is an alternative way to detect when a YouTube embedded video has finished playing and then redirect the viewer to a different webpage. You can use the YouTube Player API to detect the end of video playback and trigger a function that redirects the viewer to another page.

Here are the steps to accomplish this:

1. Load the YouTube IFrame Player API code.
2. Create a new YouTube player object using the new YT.Player() constructor.
3. Add an event listener to the player for the "onStateChange" event.
4. In the event listener, check if the player's state has changed to "0", which indicates that the video has ended.
5. If the video has ended, use JavaScript to redirect the viewer to another webpage.

Here's an example code snippet that demonstrates how to accomplish this:
<!-- Load the YouTube IFrame Player API code -->
<script src="https://www.youtube.com/player_api"></script>

<!-- Create a div to contain the YouTube player -->
<div id="player"></div>

<script>
// Create a new YouTube player object
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'VIDEO_ID',
events: {
'onStateChange': onPlayerStateChange
}
});
}

// Add an event listener to the player for the "onStateChange" event
function onPlayerStateChange(event) {
// Check if the player's state has changed to "0" (ended)
if (event.data == YT.PlayerState.ENDED) {
// Redirect the viewer to another webpage
window.location.href = "https://www.example.com";
}
}
</script>


Article written by
Sylvain Corvaisier

Independent streaming and iOS engineer

Last modified: December 29th, 2024