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

Liz*_*Liz 1 javascript youtube iframe youtube-api

我正在使用 YouTube 视频播放器 API 在 iframe 中嵌入 YouTube 视频。我想隐藏右上角的播放按钮、视频标题和图标。这最初与我在下面编写的脚本一起使用。但是,一旦视频结束,视频看起来像这样:

YouTube 播放器 API 错误的屏幕截图

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

到目前为止,这是我的脚本:

// 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();
}
Run Code Online (Sandbox Code Playgroud)

Pat*_*Pat 5

截至 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
    }
});
Run Code Online (Sandbox Code Playgroud)

至于播放按钮,我不相信您可以隐藏它——作为 youtube 的 api 品牌服务条款的一部分。