Re: Anyone found a way to stop unrelated YouTube v...

MelGee · ‎06-19-2020

HI

Has anyone found a way to stop unrelated YouTube videos showing once your embedded video has stopped playing? I've triedthe ?rel=0 command at the end of the URL and it doesn't work.

I'm the stage of removing the videos altogether but Goolge is using video as key SEO criteria so really want to keep them in.

Bernadette3 · ‎06-20-2020

It looks like they keep making changes to prevent people from stopping these videos. This code worked for me in May, but I just noticed that it is no longer working.

If you search on Google you will find loads of articles from different sources that suggest it is just not possible any more. If you find something that does work, though, please let us know! Many users would like the ability to control this. I'll also do the same.

You can also use another service like Vimeo and use the Embed Code option to display the video. I don't know if they have a similar setup as Youtube, but it might work better for you. Also, if you are on the Pro plan or higher you can use the HD Video element.

PaulMathews · ‎06-21-2020

That's pretty interesting; I hadn't heard about Google's efforts to force related videos at the end of embedded YouTube videos. I found an interesting article on how to prevent this here:

https://www.amblemedia.com/2020-working-methods-to-disable-suggested-videos-on-youtube-embeds/

Essentially, this method replaces the related videos list after the video ends. I tested this and it appears to work as indicated. The code required is as follows (this uses the example video from Bernadette's post; replace the embed code - highlighted in red text - with your YouTube video embed code):

HTML

<div class="hytPlayerWrapOuter">
    <div class="hytPlayerWrap">
        <iframe width="640" height="360" src="https://www.youtube.com/embed/y_sGwJfNUEM?rel=0&enablejsapi=1" frameborder="0"></iframe>
    </div>
</div>

CSS

You can add this to your theme's main.less file or confine it to the page where your videos are by placing the code below between opening and closing style tags and adding that to the Header Code within the page's SEO Settings (in the Site Editor, click "Pages" in the top navigation menu, click your video page, click SEO Settings, scroll down to the Header Code input box).

   .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&colon;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&colon;image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
    }

Javascript

For the page you are using to embed your videos, you can add this code to SEO Settings of that page in the Footer Code input box.

<script>
    "use strict";
    document.addEventListener('DOMContentLoaded', function () {
        if (window.hideYTActivated) return;
        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>

Bernadette3 · ‎06-23-2020

Thanks for sharing, @PaulMathews!

Anyone found a way to stop unrelated YouTube videos showing?