嵌入youtube APi Custom按钮

时间:2015-12-22 23:28:44

标签: javascript youtube-api

我正在定制我的youtube播放器,但我得到一个错误,我已经检查问题是不是包装在一个准备好的功能,但仍然得到错误 "未捕获的ReferenceError:YT未定义"

JS:

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

var player;

onYouTubeIframeAPIReady = function () {
    player = new YT.Player('player', {
        height: '193',
        width: '284',
        videoId: 'jGa2J3RBPtQ',  // youtube video id
        playerVars: {
            'autoplay': 0,
            'rel': 0,
            'showinfo': 0
        },
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

onPlayerStateChange = function (event) {
    if (event.data == YT.PlayerState.ENDED) {
        $('.start-video').fadeIn('normal');
    }
}

$(document).on('click', '.start-video', function () {
    $(this).fadeOut('normal');
    player.playVideo();
});

HTML:

<div id="player"></div>
<button class="start-video">Play</button>

1 个答案:

答案 0 :(得分:1)

您是否尝试过切换到HTTPS协议?

为我工作here

tag.src = "https://www.youtube.com/iframe_api";