CODEWITHSUNDEEP
javascripthtmlcssiframeyoutube
Luis Fernandez
Luis Fernandez

Reputation: 559

How to disable "related videos" from an embedded youtube playlist

I need to embed a Youtube playlist on an iframe. I don't want the user to be able to exit this playlist, so I need to disable the "related video" and "more video" features (the one that shows more videos when the video is stopped and the one that shows them when the video is finished).

I've tested some workarounds but they only used to work for single videos (not playlist) and most of them stopped working after they changed the way ?rel=0 behaves. Is there any way to do this?

This is my code:

.rep {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 1280px;
   height: 640px;
   z-index: 6;
}

<iframe class="rep" src="https://www.youtube.com/embed/videoseries?list=PLUl4u3cNGP63gFHB6xb-kVBiQHYe_4hSi" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

EDIT: The videos must be shown in order, therefore I can't use rel to display only videos from the playlist. Plus, if you click on them a youtube page outside of the iframe will appear.

Upvotes: 18

Views: 53647

Answers (11)

Rashid
Rashid

Reputation: 375

URL parameter rel=0 is working fine to stop the appearance of related videos. e.g. https://www.youtube.com/embed/fMTfFNihqfM?autoplay=1&rel=0

Upvotes: 0

Petar Nikolov
Petar Nikolov

Reputation: 1

I found out that if the youtube channel the video is from has less than (I don't know how many exactly but definitely more than 20 and less than 40) videos and the iframe youtube url has the rel=0 attribute, it won't show the related videos section at all.

Upvotes: 0

SUMIT KUMAR SINGH
SUMIT KUMAR SINGH

Reputation: 45

In my case this is working you can try this :

https://www.youtube-nocookie.com/embed/{videoId}?rel=0&amp;showinfo=0

Upvotes: 2

5andr0
5andr0

Reputation: 2056

Based on the work of Maximillian Laumeister hideyt I forged a JS which can be included anywhere and autoamtically wraps its magic around every embedded youtube iframe you have.

hideYTrel.js

"use strict";
if (document.readyState !== 'loading') init();
else document.addEventListener('DOMContentLoaded', init);

function init() {
    if (window.runOnce) return;

    if (typeof YT === 'undefined') {
        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 iframes = [];
    
    for (var iframe of document.querySelectorAll("iframe[src]")) {
        var src = iframe.getAttribute("src");
        if (src.includes("youtube.com/embed/")) {
            if(!src.includes("enablejsapi=1"))
                if(src.includes("?"))
                    iframe.setAttribute("src", src + "&enablejsapi=1");
                else
                    iframe.setAttribute("src", src + "?enablejsapi=1");

            iframes.push(iframe);
        }
    }

    var overlayStyles = {
        display: "none",
        content:"",
        position: "absolute",
        left: 0,
        right: 0,
        cursor: "pointer",
        backgroundColor: "black",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
    };

    window.onYouTubeIframeAPIReady = function() {
        iframes.forEach(function(iframe) {
            var overlay = document.createElement('div');
            for (var style in overlayStyles) {
                overlay.style[style] = overlayStyles[style];
            }
            
            var wrapper = document.createElement('div');
            wrapper.style.display = "inline-block";
            wrapper.style.position = "relative";

            iframe.parentNode.insertBefore(wrapper, iframe);
            
            wrapper.appendChild(overlay);
            wrapper.appendChild(iframe);
            
            var onPlayerStateChange = function(event) {
                if (event.data == YT.PlayerState.ENDED) {
                    overlay.style.backgroundImage = "url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)";
                    overlay.style.backgroundSize = "64px 64px";
                    overlay.style.top = 0;
                    overlay.style.bottom = 0;
                    overlay.style.display = "inline-block";
                } else if (event.data == YT.PlayerState.PAUSED) {
                    overlay.style.backgroundImage = "url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)";
                    overlay.style.backgroundSize = "40px 40px";
                    overlay.style.top = "40px";
                    overlay.style.bottom = "50px";
                    overlay.style.display = "inline-block";
                } else if (event.data == YT.PlayerState.PLAYING) {
                    overlay.style.display = "none";
                }
            };
            
            var player  = new YT.Player(iframe, {
                    events: {
                        'onStateChange': onPlayerStateChange
                    }
                });
        
            wrapper.addEventListener("click", function() {
                var playerState = player.getPlayerState();
                if (playerState == YT.PlayerState.ENDED) {
                    player.seekTo(0);
                } else if (playerState == YT.PlayerState.PAUSED) {
                    player.playVideo();
                }
            });
        });
    };
    window.runOnce = true;
}

Jsfiddle: https://jsfiddle.net/pv75zjoh

Upvotes: 0

Ibrahim
Ibrahim

Reputation: 6088

Update for 2021

Youtube now seems to have a loop function that can be used to git rid of “related videos”. What it does basically is that when your video ends, it restarts again instead of showing (un)related videos. It worked perfectly in my case. Here is the code:

https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1

Please make sure to replace both VIDEO_ID in the code with your video ID. N̲o̲ N̲e̲e̲d̲ for creating a playlist

Example of full iframe code with player controls being enabled

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1" title="YouTube video player" rel="0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Example of full iframe code with player controls being disabled

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1&controls=0" title="YouTube video player" rel="0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Upvotes: 7

Rojo
Rojo

Reputation: 2869

I just found a great website that found a fix for your problem. The code is a bit long, but I think it works. They have an example if you scroll up a bit. https://www.maxlaumeister.com/blog/hide-related-videos-in-youtube-embeds/#hideyt-embed-code

<!-- https://maxl.us/hideyt -->
<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" src="https://www.youtube.com/embed/`**YOUR VIDEO ID HERE**`?rel=0&enablejsapi=1" frameborder="0"></iframe>
    </div>
</div>
<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>

Upvotes: 2

Davy de Vries
Davy de Vries

Reputation: 5123

If I look through the YouTube Embedded Players and Player Parameters docs, there is no such thing to order the more videos section if you pause the video.

The two parameters I suggest to get near as possible to your goal is:

You can add:

  • listType=playlist
  • rel=0 to turn off related videos from the more videos section.

Note: The behaviour of rel=0 will be removed after September 25, 2019.

Conclusion:

It seems like what you want to achieve is not possible. With the default embed iframe of YouTube.

You might want to consider to look to other players with playlist options. Something like JW Player note that you need a licence for this player, JW Player playlist docs. I did some reading on JW Player as well, they currently don't support YouTube videos.

But maybe there are other players that have the same functionally for free.

Upvotes: 19

Josh
Josh

Reputation: 1267

Here is a work around not the best but it will stop them annoy recommendations. It loops the playlist never giving youtube a chance to stop and give you there recommendations to get users back to youtube. This has worked well for me. If you see it plays my list in the loop and then plays the next, all without ever bringing up the recommendations. if you stop it it just stays there. Hope it helps they key is 0&loop https://codesandbox.io/s/adoring-tereshkova-nwv8i

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
<iframe width="100%" height="425" src="https://www.youtube.com/embed/HdEN2JinZVE?autoplay=&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>
    <script src="src/index.js">
    </script>
</body>

</html>

Upvotes: 3

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

Unfortunately, external CSS or JS can't be applied to iframe videos or iframe contents in a webpage.

For now, you can add rel=0 parameter to the video URL in iframe code. As per youtube documentations, rel=0 parameter will be disabled after Sep 25 2019.

Here is an example with rel=0 parameter

<iframe width="560" height="315" src="https://www.youtube.com/embed/J8Rt6HSzrqY&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can also use the playlist feature or parameter. See example below:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Above code is taken from Official Youtube Support documents. You can add only one video in the list so that it does not play any other video after the current video finishes.

Upvotes: 0

Kapil Yadav
Kapil Yadav

Reputation: 706

It can not be done after September 25, 2018. The effect of the change is that you will not be able to disable related videos. Below is the YouTube official post link of it.

Official Link: https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018

Thanks

Upvotes: 2

Alan Lee
Alan Lee

Reputation: 132

If you add &rel=0 at the end of playlist link - in related videos will be showed only videos from your playlist. Example:

<iframe class="rep" src="https://www.youtube.com/embed/videoseries?list=PLUl4u3cNGP63gFHB6xb-kVBiQHYe_4hSi&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

If you remove &rel=0 from the link, it show random videos from youtube

Upvotes: 10

Related Questions