可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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.
回答1:
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
回答2:
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.
回答3:
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.
回答4:
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!
回答5:
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
回答6:
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!!
回答7:
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.