2020 Working Methods To Disable Suggested Videos on YouTube Embeds

February 24, 2020

Total

Disable Suggested Videos on Youtube | While I was doing some SEO work earlier this week I ran into an issue after I uploaded a bunch of YouTube marketing videos for a client. The client loved the video campaign that we created for him but after watching his video live he was less than thrilled with the fact that YouTube kept suggesting videos from his main competitor. This type of thing used to be an easy fix but in September 2018 YouTube disabled the ability for users to prevent related videos from showing on YouTube embeds.

As of July 2020, there are three methods to disable suggested videos from YouTube embed. In this tutorial, I will tell you discuss the pros and cons of each of the three methods.

Option 1: Disable suggested Videos Using Unlisted Videos

Create a new YouTube channel for videos for the videos where you don’t want to show any related videos at the end. Set all of these videos to “UNLISTED”. Append “rel=0″ to the end of the YouTube share URL.

For example — https://www.youtube.com/embed/he2a4xK8ctk?rel=0

The “rel-0” tells YouTube to only show related videos in the channel of origin. Since all of the videos in this channel will be set to UNLISTED YouTube will Ignore all of the videos and in essence it is like there are no related videos.

The DOWNSIDE of this method is that your videos will be unlisted and they won’t be found organically which didn’t make this an acceptable option so back to the drawing board.

The “rel-0” tells YouTube to only show related videos in the channel of origin. Since all of the videos in this channel will be set to UNLISTED YouTube will Ignore all of the videos and in essence it is like there are no related videos.

The DOWNSIDE of this method is that your videos will be unlisted and they won’t be found organically which didn’t make this an acceptable option so back to the drawing board.

Option 2: Disable Related YouTube Videos Using WordPress Plugin

You can also disable related videos in YouTube using a WordPress plugin. This is a much more SEO friendly method than the above option. To do this I found a great plugin called Embed Plus for YouTube.

For this method you simply have to enable the setting within the plugin called “Hide related videos at the end of playback”.

The first thing you want to do is install and activate the plugin. You can do this from the plugin’s page of your WordPress admin dashboard.

This is a very powerful, yet lightweight plugin that offers all sorts of YouTube video functionality when used in conjunction with your WordPress website.

Option 3: Disable Related YouTube Videos Using PHP Code

After quite a bit of research I found a coded option which worked. An example of the code can be found below. If you are interested in using this method simply replace the placeholder text on line 39 *****PLACE-EMBED-CODE-HERE***** with your videos embed code.

				
					<style>
    .hytPlayerWrap {
        display: inline-block;
        position: relative;
    }
    .hytPlayerWrap.ended::after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 64px 64px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
    }
    .hytPlayerWrap.paused::after {
        content:"";
        position: absolute;
        top: 70px;
        left: 0;
        bottom: 50px;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 40px 40px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
    }
</style>
<div class="hytPlayerWrapOuter">
    <div class="hytPlayerWrap">
        <iframe
            width="640" height="360"
            data-src="https://www.youtube.com/embed/*****PLACE-EMBED-CODE-HERE*****?rel=0&enablejsapi=1"
            frameborder="0"
         src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" data-load-mode="1"></iframe>
    </div>
</div>
<script>
    "use strict";
    document.addEventListener('DOMContentLoaded', function() {
        // Activate only if not already activated
        if (window.hideYTActivated) return;
        // Activate on all players
        let onYouTubeIframeAPIReadyCallbacks = [];
        for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
            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.hideYTActivated = true;
    });
</script>

See the sample video below.

If you are viewing this on a desktop computer then the sample video below is extra small due to the limitations of the global settings of my Blog theme.

Here is an example on a page of its own with the Global Theme setting interfering https://www.amblemedia.com/youtube.html