当用户停止视频时，如何隐藏 Youtube iframe 中的“更多视频”部分？
例子：
<iframe width="750" height="420" src="https://www.youtube/embed/cZnsLVArIt8?rel=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
我找不到任何解决方案here。
【问题讨论】：
我是这样解决的
unlisted 视频请看下面的例子
<iframe src="https://www.youtube.com/embed/HAxjVEiBvCA?rel=0"></iframe>
P.S.：我以后可能会删除视频示例，所以只需更改 id video 并确保生成 iframe 的帐户中没有可用的公开可见性视频
【讨论】：
您只需从 iframe 中删除“rel=0”即可。
【讨论】：
如果您安装了 uBlock Origin 广告拦截器，请使用静态过滤器将其删除：
!YouTube embed pause overlay
youtube.com##.ytp-pause-overlay
【讨论】：
##.ytp-pause-overlay 以使其正常工作。
我正在使用带有插件 uBlock Origin 的 Firefox。
点击uBlock Origin的logo，点击设置图标，Open the dashboard。
在仪表板中，转到标签My filters 并添加以下行：
youtube.com##.ytp-scroll-min.ytp-pause-overlay
点击Apply changes。
现在您在暂停 Youtube 视频时不会看到“更多视频”。
【讨论】：
这里减少了测试用例： https://codepen.io/jesserosenfield/full/VwZELye
基本上——使用setTimeout 的自定义按钮延迟暂停和播放功能...添加显示/暂停/播放/暂停类来控制“占位符图像”的 CSS 过渡。
如果您需要，很乐意详细解释，但代码笔应该很容易解释！
Javascript：
var player,
$player,
$playerWrap,
$playerParent;
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() {
window.$player = $('#player'),
window.$playerWrap = $('#player-wrap');
window.$playerParent = $('#player-parent');
window.player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: jQuery('#player').attr('data-yt'),
host: 'http://www.youtube.com',
playerVars: {
'enablejsapi' : 1,
'playsinline': 1,
'autoplay': 0,
'controls': 0,
'rel' : 0,
'showinfo' : 0,
'showsearch' : 0,
'mute' : 1,
'modestbranding' : 1,
'disablekb' : 1,
'loop' : 1,
'origin': window.location.href
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function playClasses($el) {
$el.addClass('playing').removeClass('paused showing');
};
function pauseClasses($el) {
$el.removeClass('playing pausing').addClass('paused');
};
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
(function($) {
window.$playerWrap = $('#player-wrap');
window.$playerParent = $('#player-parent');
window.$playerWrap.on('click', function(){
var player = window.player,
$me = $(this);
if (player.getPlayerState() == 1) {
window.$playerParent.removeClass('playing').addClass('pausing');
setTimeout(function(){
player.pauseVideo();
}, 350);
} else {
window.$playerParent.addClass('showing');
player.playVideo();
}
});
})(jQuery);
};
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
var thedata = event.data;
//Ended
if (thedata === 0) {
window.player.playVideo();
window.player.seekTo(1);
}
// Playing
if (thedata === 1) {
setTimeout(function(){
playClasses(window.$playerParent);
}, 450);
}
// Paused
if(thedata === 2) {
pauseClasses(window.$playerParent);
}
}
HTML
<div id="player-parent">
<div id="player-wrap" class="pr">
<div class="player-ph--color"> </div>
<div class="player-ph"></div>
<div id="player" data-yt="CjB_oVeq8Lo"></div>
</div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
CSS (LESS)
.player-ph{
width: 50%;
height: 100%;
position: relative;
background: url(https://images.unsplash.com/photo-1503714964235-8954a5249c00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
background-size: cover;
mix-blend-mode: multiply;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */;
}
#player-wrap {
cursor: pointer;
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.player-ph,
.player-ph--color,
#player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#player {
z-index: 5;
pointer-events: none;
opacity: 0
}
.player-ph--color {
background: red;
}
.player-ph--color:after {
content: "▶️";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 300px;
font-size: 150px;
color: #fff;
opacity: .5;
display: block;
z-index: 2
}
#player {
transition: opacity .325s ease-out;
}
.player-ph--color:after {
transition: opacity 1s ease-out;
}
#player-parent {
&.pausing,
&.paused {
#player {
opacity: 0
}
}
&.playing,
&.showing {
.player-ph--color:after {
opacity: 0
}
}
&.playing #player {
opacity: 1
}
}
【讨论】：
根据https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
rel 参数的行为在 9 月或之后发生变化 2018 年 2 月 25 日。更改的效果是 您将无法 禁用相关视频。但是，您可以选择 指定播放器中显示的相关视频应来自 与刚刚播放的视频相同的频道。
更具体地说：在更改之前，如果参数的值是 设置为0，则播放器不显示相关视频。之后 更改，如果rel参数设置为0，播放器将显示相关 与刚刚发布的视频来自同一频道的视频 玩过。
似乎 youtube 的意图是不提供禁用相关视频功能的能力。
由于 CORS，jquery 方式似乎也不起作用，我猜也是 css。
$(".media-youtube-player").contents().find(".ytp-pause-overlay").remove();
导致阻止源为“xxx”的框架访问跨域框架。
不确定是否有办法做到这一点，除非 youtube 再次允许。也想禁用此功能，因此不胜感激。
【讨论】：