How ToYouTube
[us_post_views icon=”fas|eye” result_thousand_short=”1″ css=”%7B%22default%22%3A%7B%22font-size%22%3A%220.9rem%22%7D%7D”]
0

How to: Stop other videos appearing at the end of YouTube video embeds in 2020

There’s absolutely no doubt that we’re a generation of video lovers, from keyboard cats to epic fails – you can be sure we’ve watched it. So it’s needless to say that embedding a video into your content is a great idea, not only can it help to convey the point you’re trying to get across, but it also makes your content stand out more and a lot more interactive for your audience. In fact, it’s been shown that including a video into your content can increase conversion rates up to 80% – definitely a statistic you shouldn’t be ignoring.

What isn’t so much of a good idea, though, is allowing your video to show more related videos. Allowing the use of YouTube’s related video feature on your embed is more likely to direct your readers away from your content to a potential competitor’s content.

However, since September 2018 YouTube has changed how their API (Application Program Interface) works, meaning that users no longer have the ability to hide these related videos themselves.

How to disable related videos in 2020?

Before September 2018, a user could easily hide the related videos by adding the parameters ‘?rel=0’ to the end of a YouTube video URL, like the example below shows:

<iframe width="640" height="360" 
src="https://www.youtube.com/watch?v=EgBJmlPo8Xw?rel=0" frameborder="0">
</iframe>

Once it was announced to be a deprecated parameter, bloggers and website owners worldwide were left with no other options for hiding the suggested videos. Now, if you try to use the ?rel=0 parameter, you will see that it shows the related videos that come from your YouTube channel. This is a better option for some people, as it removes the worry that your competitors will be up there with your videos, but it still isn’t a great option for some people and some people want it to be fully disabled from their embeds.

We can only presume that it was removed due to not seeing a lot of use over the years, but what now for those of us who still want to hide all of the suggested videos from our videos? Well, there is a snippet of code we have developed for people which can be used as a little “hack” to work-around the API.

Disable related videos on non-Wordpress websites

If your website isn’t making use of a CMS (Content Management System), start by adding this code to the Header of your style.css (or whatever your main CSS stylesheet is called)

.YouTubeVidWrap {
position:relative!important;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
display: block!important;
}
.YouTubeVidWrap iframe, .YouTubeVidWrap object, .YouTubeVidWrap embed {
position:absolute;
top:0;
left:0;
width: 100%!important;
height:100%;
}
.YouTubeVidWrap.ended::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%!important;
height:100%;
cursor: pointer;
content:"";
background-color: black;
background-repeat: no-repeat;
background-position: center; 
background-image: url('https://i.ibb.co/Gs6s68s/refresh-icon.png');
}
.YouTubeVidWrap.paused::after {
content:"";
position: absolute;
top: 0px;
left: 0;
bottom: 50px;
right: 0;
width: 100%!important;
height:100%;
cursor: pointer;
background-color: black;
background-repeat: no-repeat;
background-position: center; 
background-image: url('https://i.ibb.co/h8tj73m/play-button.png');
}

Once you’ve added that, you now need to add the script to your code. In the HTML code of the page you want to display your videos, in the footer you will need to add this script:

Note: You can add this script to a JS file and call it up in your header using <script src=”scriptname.js”></script>’ – this will allow the script to work across the whole site

document.addEventListener('DOMContentLoaded', function() {
        // Activate only if not already activated
        if (window.YouTubeVidWrap) return;
        // Activate on all players
        let onYouTubeIframeAPIReadyCallbacks = [];
        for (let playerWrap of document.querySelectorAll(".YouTubeVidWrap")) {
            let playerFrame = playerWrap.querySelector("iframe");
            
            let tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            let firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            
            let onPlayerStateChange = function(event) {
                if (event.data == YT.PlayerState.ENDED) {
                    playerWrap.classList.add("ended");
                } else if (event.data == YT.PlayerState.PAUSED) {
                    playerWrap.classList.add("paused");
                } else if (event.data == YT.PlayerState.PLAYING) {
                    playerWrap.classList.remove("ended");
                    playerWrap.classList.remove("paused");
                }
            };
            
            let player;
            onYouTubeIframeAPIReadyCallbacks.push(function() {
                player = new YT.Player(playerFrame, {
                    events: {
                        'onStateChange': onPlayerStateChange
                    }
                });
            });
          
            playerWrap.addEventListener("click", function() {
                let playerState = player.getPlayerState();
                if (playerState == YT.PlayerState.ENDED) {
                    player.seekTo(0);
                } else if (playerState == YT.PlayerState.PAUSED) {
                    player.playVideo();
                }
            });
        }
        
        window.onYouTubeIframeAPIReady = function() {
            for (let callback of onYouTubeIframeAPIReadyCallbacks) {
                callback();
            }
        };
        
        window.YouTubeVidWrap = true;
    });

Finally, you now need to paste the following snippet into the HTML body of the page you want your video to be displayed. All you need to change is the video ID, in this example code, WXFXcJeMiuU is the video ID. If you can’t find your ID, we have a guide for learning how to get the video ID of your YouTube video.

<div class="YouTubeVidWrapOuter">
   <div class="YouTubeVidWrap">
      <iframe width="640" height="360" src="https://www.youtube.com/embed/WXFXcJeMiuU?rel=0&amp;enablejsapi=1&amp;modestbranding=1" frameborder="0">
      </iframe>
   </div>
</div>

How to disable related videos on WordPress website and posts

Now, if you want to disable YouTube’s related videos on a WordPress website or post, you will have to follow a different process. There are premium plugins available that offer to do this for you, but why pay for something you can do for free?

First off, you’re going to want to head on over to WordPress.org and install SOGO Add Script to Individual Pages Header Footer plugin onto your WordPress website. What this plugin will allow you to do is add style and script codes to your header and/or footer with ease, you also have the option to add code to the header/footer of individual pages also.

sogo header footer plugin on WordPress

After you have installed the plugin, navigate to Settings > Header Footer Settings – if you want this to apply to all videos on your website, you will need to add the codes below into the header and footer section in the settings.

Header Code

 <style>
.YouTubeVidWrap {
position:relative!important;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
display: block!important;
}
.YouTubeVidWrap iframe, .YouTubeVidWrap object, .YouTubeVidWrap embed {
position:absolute;
top:0;
left:0;
width: 100%!important;
height:100%;
}
.YouTubeVidWrap.ended::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%!important;
height:100%;
cursor: pointer;
content:"";
background-color: black;
background-repeat: no-repeat;
background-position: center; 
background-image: url('https://i.ibb.co/Gs6s68s/refresh-icon.png');
}
.YouTubeVidWrap.paused::after {
content:"";
position: absolute;
top: 0px;
left: 0;
bottom: 50px;
right: 0;
width: 100%!important;
height:100%;
cursor: pointer;
background-color: black;
background-repeat: no-repeat;
background-position: center; 
background-image: url('https://i.ibb.co/h8tj73m/play-button.png');
}
</style>

Footer Code

<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
        // Activate only if not already activated
        if (window.YouTubeVidWrap) return;
        // Activate on all players
        let onYouTubeIframeAPIReadyCallbacks = [];
        for (let playerWrap of document.querySelectorAll(".YouTubeVidWrap")) {
            let playerFrame = playerWrap.querySelector("iframe");
             
            let tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            let firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
             
            let onPlayerStateChange = function(event) {
                if (event.data == YT.PlayerState.ENDED) {
                    playerWrap.classList.add("ended");
                } else if (event.data == YT.PlayerState.PAUSED) {
                    playerWrap.classList.add("paused");
                } else if (event.data == YT.PlayerState.PLAYING) {
                    playerWrap.classList.remove("ended");
                    playerWrap.classList.remove("paused");
                }
            };
             
            let player;
            onYouTubeIframeAPIReadyCallbacks.push(function() {
                player = new YT.Player(playerFrame, {
                    events: {
                        'onStateChange': onPlayerStateChange
                    }
                });
            });
           
            playerWrap.addEventListener("click", function() {
                let playerState = player.getPlayerState();
                if (playerState == YT.PlayerState.ENDED) {
                    player.seekTo(0);
                } else if (playerState == YT.PlayerState.PAUSED) {
                    player.playVideo();
                }
            });
        }
         
        window.onYouTubeIframeAPIReady = function() {
            for (let callback of onYouTubeIframeAPIReadyCallbacks) {
                callback();
            }
        };
         
        window.YouTubeVidWrap = true;
    });
</script>

Once entered, click ‘Save Changes’ to apply those changes across your whole website, the entered codes should look like the following screenshot.

If you only want this to appear on an individual page, navigate to the page you want to add it to and scroll to the bottom of the WordPress post page, there should be Header/Footer options there, follow the same procedure and hit save and/or publish.

Finally – to display the video on your WordPress post, navigate to the post you want to edit and through the Gutenberg editor, press the ‘+’ button to bring up a modal box, search for the ‘Custom HTML’ option and select it. Input the following code:

<div class="YouTubeVidWrapOuter">
   <div class="YouTubeVidWrap">
      <iframe width="640" height="360" src="https://www.youtube.com/embed/ApXoWvfEYVU?rel=0&amp;enablejsapi=1&amp;modestbranding=1" frameborder="0">
      </iframe>
   </div>
</div>

Remember to change the Video ID in the embed code to the video you want to display or else this won’t work.

Conclusion

If you’ve followed these instructions properly, you should now have a perfectly responsive YouTube video embed with absolutely zero related videos attached, as shown below.

More Similar Posts

No results found.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Viewed Posts

No results found.

Menu