I need to hide related videos after watching the video. I set rel=0, but it is not working. I am using this page for testing. The rel checkbox value doesn't affect on shown related videos after watching video.
It doesn't work in google chrome. In mozilla firefox it properly works.
As of September 25, 2018, you are not be able to disable related videos. Instead, if the rel parameter is set to 0, related videos will come from the same channel as the video that was just played. YouTube API
YouTube changed the rel=0 parameter as of September 2018 so that it no longer fully disables related videos.
However, you can work around this using the YouTube Player API to show custom HTML instead of related videos.
Here is some example code that displays a custom "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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
</style>
<div>
<div id="playerWrap">
<iframe
width="640" height="360"
src="https://www.youtube.com/embed/0sDg2h3M1RE?enablejsapi=1"
frameborder="0"
></iframe>
</div>
</div>
<script>
var playerFrame = document.currentScript.previousElementSibling.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 onYouTubeIframeAPIReady() {
player = new YT.Player(playerFrame, {
videoId: 'M7lc1UVf-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>
For the minified code along with further description, details and instructions, view my blog post on the subject.
This is because you are most likely signed in on your Chrome browser, but not your Firefox browser.
&rel=0 only works when not signed in. However, you can get around this by using the enhanced privacy mode:
https://www.youtube-nocookie.com/embed/[id]?rel=0
youtube--nocookie.com or youtube-nocookie.com ? the former does not work for me. –
Crud If you want to hide related video then you should call "player.stopVideo()" when player state is ended "PlayerState.ENDED".
PS: Sorry, english is not my first language.
Here i found a Solution. stopVideo on player state changed to ENDING
<!DOCTYPE html>
<html>
<head>
<title>Alternative to hide Related Video & Info</title>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<div id="playerWrapOuter">
<div id="playerWrap">
<?php
$embed = '<iframe width="560" height="315" src="https://www.youtube.com/embed/HjxYvcdpVnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
preg_match('/src="(.+?)"/', $embed, $matches);
$src = $matches[1];
$params = array(
'width' => "640",
'height' => "360",
'enablejsapi' => 1,
'rel' => 0,
'modestbranding' => 1,
'showinfo' => 0,
);
$querystring = http_build_query($params, $src);
$new_src = $src.'?'. $querystring;
$embed = str_replace($src, $new_src, $embed);
$embed = str_replace( '<iframe ', '<iframe ', $embed );
echo $embed;
?>
</div>
</div>
<script>
(function() {
var player;
var playerFrame = document.currentScript.previousElementSibling.querySelector("iframe");
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player(playerFrame, {
events: {
'onStateChange': onPlayerStateChange
}
});
};
window.onPlayerStateChange = function(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
}
};
})();
</script>
</body>
</html>
Here is a fiddle demo: https://jsfiddle.net/Aishan/znabhuo2/ Hope that helps!!
As stated by Irina Kovalchuk above, as of September 25, 2018, you are not be able to disable related videos.
But I found a workaround:
setInterval(function () {
if (player.getCurrentTime() >= player.getDuration()-1) {
player.seekTo(1);
}
}, 100);
as soon as video reaches to end move seek pointer to start. It won't give time to show related videos. This workaround is suitable if you want to play video in loop
Mine wasn't working because the code spit out from the dev page https://developers.google.com/youtube/youtube_player_demo
was incomplete and missing the closing tag!
Checked this both with Chrome and Opera, it works.
https://jsfiddle.net/o8ztczn6/
<iframe width="560" height="315" src="https://www.youtube.com/embed/6UVZpQ8cLSQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
No related video is shown on finishing.
© 2022 - 2024 — McMap. All rights reserved.
