2016-10-17 190 views
0

我正在使用YouTube視頻播放器API將YouTube視頻嵌入到iframe中。我想隱藏右上角的播放按鈕,視頻標題和圖標。這最初與我在下面寫的腳本一起工作。然而,一旦視頻即將結束的視頻看起來是這樣的:YouTube Player API隱藏iframe中的播放按鈕,圖標和視頻標題

Screenshot of YouTube player API error

的圖標或標題都不是點擊任一。爲什麼這些視頻一結束就會出現?如何編輯我的腳本以在視頻結束時隱藏視頻標題,播放按鈕和右上角的圖標?

這是到目前爲止我的腳本:

// 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(); 
} 

回答

2

添加'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品牌服務條款的一部分。

+0

謝謝!如果我需要保留播放按鈕,是否有辦法讓它在懸停狀態下工作?目前,我無法點擊按鈕。視頻功能可以在http://pianopushplay.splashworldwide.com/底部看到。 – Liz

+0

那麼在這種情況下,你有'pointer-events:none;'on'.video-foreground'(這意味着點擊無論如何都不會做任何事情)以及'

'覆蓋了視頻(因爲'.video-background'類),所以你實際上並沒有點擊視頻 - 你點擊'.video-background' – Pat

相關問題