YouTube Player API 在 iframe 中隐藏播放按钮、图标和视频标题

Posted 2023-02-25

【中文标题】YouTube Player API 在 iframe 中隐藏播放按钮、图标和视频标题

【英文标题】：YouTube Player API hide play button, icons, & video title in iframe

【发布时间】：2016-10-17 21:03:20

【问题描述】：

我正在使用 YouTube 视频播放器 API 在 iframe 中嵌入 YouTube 视频。我想隐藏右上角的播放按钮、视频标题和图标。这最初与我在下面编写的脚本一起工作。但是，一旦视频结束，视频将如下所示：

也没有任何图标或标题是可点击的。为什么这些会在视频结束后出现？如何编辑脚本以在视频结束时隐藏视频标题、播放按钮和右上角的图标？

到目前为止，这是我的脚本：

// download api code
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// this function creates an <iframe> and youtube player after the api code downloads
var player;

function onYouTubePlayerAPIReady() 
    player = new YT.Player('player', 
    height: '400',
    width: '800',
    playerVars: 
        'autoplay': 1,
        'controls': 0,
        'autohide': 1,
        'wmode': 'opaque',
        'rel': 0,
        'loop': 1
    ,
    videoId: 'vlRxmgXPcW0',
    events: 
        'onReady': onPlayerReady
    
);


// the api will call this function when the video player is ready
function onPlayerReady(event) 
event.target.mute();

【参考方案1】：

截至 2018 年 9 月 25 日，showinfo 参数已 贬值。 https://developers.google.com/youtube/player_parameters#august-23,-2018

在构造函数参数中添加'showinfo' : 0,

所以：

function onYouTubePlayerAPIReady() 
    player = new YT.Player('player', 
    height: '400',
    width: '800',
    playerVars: 
        'autoplay': 1,
        'controls': 0, 
        'autohide': 1,
        'showinfo' : 0, // <- This part here
        'wmode': 'opaque',
        'rel': 0,
        'loop': 1
    ,
    videoId: 'vlRxmgXPcW0',
    events: 
        'onReady': onPlayerReady
    
);

至于播放按钮，我认为您不能隐藏它——这是 youtube 的 api 品牌服务条款的一部分。

【讨论】：

谢谢！如果我需要保留播放按钮，有没有办法让它在悬停时工作？目前，我无法单击该按钮。视频功能在pianopushplay.splashworldwide.com底部可见

好吧，在这种特定情况下，您在.video-foreground 上有pointer-events: none;（意味着点击不会做任何事情）以及<section id="video" class="section section-center video-background"> 掩盖了视频（因为@987654329 @class) 所以你实际上并没有点击视频——你点击的是.video-background