04 8003 0352
How to Get Rid of Related Videos in Embedded YouTube Player
Hide Youtube Related Videos
Sometimes unchecking the box that says “allow advertisements to be displayed alongside my videos” is not enough for actually getting rid of ads accompanying a YouTube video. This becomes a real problem when the ads are showing up on your own website. The fact that Youtube continuously updates its website navigation and settings makes it challenging to find relevant information online to solve this issue. We prepared a couple of solutions that will work for you at all times and most likely never expire.
If you’ve spent some time searching already you probably are familiar with the trick “rel=0”, “&rel=0” or “?rel=0”. Unfortunately, none of those will help you to get rid of ads unless you’re signed in on Youtube. This change happened quite recently (September 2018) so not many people heard about the change yet and are spending time on researching why this doesn’t work after inserting it into their code or URL. Here’s how to hide youtube related videos!
How to Disable Youtube Related Videos with a Code or Plugin
You can work around this using the YouTube Player API to show custom HTML instead of related videos. Here is a simple code that displays a “replay” button over the video once it completes, hiding the related videos:
<style>
#playerWrap {
display: inline-block; position: relative;
#playerWrap. shown::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, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9;
</style> <div> <div id=”playerWrap”> <iframe
width=”640″ height=”360″ src=”https://www.youtube.com/embed/OsDg2h3M1RE?enablej sapi=1″
frameborder=”0″ ></iframe> </div> </div> <script>
var playerFrame = document.currentScript.previous Element Sibling.children [0].children [0];
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 player; function on YouTubeIframeAPIReady () { player = new YT.Player(playerFrame, {
videoId: ‘M71c1UV-VE’, events: {
‘onStateChange’: onPlayerStateChange
});
function onPlayerStateChange (event) { if (event.data == YT.PlayerState. ENDED) {
document.getElementById(“playerWrap”).classList.add(“shown”);
document.getElementById(“playerWrap”).addEventListener(“click”, function() {
player.seekTo(0);
document.getElementById(“playerWrap”).classList.remove(“shown”); })
; </script>
Also, it is possible to make the video stop before it ends so the ads don’t show up.
However, there is an easier way – plugins. Unfortunately, their usefulness can expire and you can’t always rely on them but who cares if it works? Here is a link to one that is simple and easy to install:
It’s important to pay attention to the date of the article/video you use to find a solution because YouTube often changes its website settings.
