Youtube Iframe Api 未加载视频答案

【问题标题】：Youtube Iframe Api not loading videoYoutube Iframe Api 未加载视频
【发布时间】：2014-07-06 01:08:29
【问题描述】：

我有一个页面，一开始有一个空的 div，当点击一个按钮时，它会打开一个 youtube 视频。

HTML：

<script src="public/js/yt-player.js" async="true"></script>
<div class="bgCover">&nbsp;</div>
    <div class="overlayBox">
        <div class="overlayContent">
            <div class="player"></div>
        </div>
    </div>

JS（在外部文件中）：

$(document).ready(function() {

var isOpen = false;

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


// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;


window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('player', {
        height: '480',
        width: '800',
        videoId: '8hP9D6kZseM',
        events: {
            'onReady': onPlayerReady
        }

    });
}

function onPlayerReady() {
    // Never get here
    console.log(player);
}


function stopVideo() {
    player.stopVideo();
    player.clearVideo();
}

function doOverlayOpen() {
    // ...
    player.playVideo();
}

function doOverlayClose() {
    // ...
    player.stopVideo();
}

$('a.launchLink').click(doOverlayOpen);

在“测试”环境中尝试代码时（只需按下按钮，即可测试：http://jsfiddle.net/Te74S/），它运行良好。

但是在生产环境中，我加载了很多 js 文件，并且似乎从未调用过 onPlayerReady 函数。

所以我收到关于 playVideo 和 stopVideo 函数的错误，例如“Uncaught TypeError: undefined is not a function”。知道问题出在哪里吗？

谢谢

【问题讨论】：

标签： javascript jquery youtube youtube-javascript-api

【解决方案1】：

<div class="player"></div>

应该是

<div id="player"></div>

播放器的目标是 id 而不是类。

【讨论】：