Youtube Iframe Api not loading video

0
votes

I have a page that has an empty div at first and when clicking on a button, it will open a youtube video.

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 (in an external file) :

$(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);

When trying the code in a "testing" environnement (so just the button, to test: http://jsfiddle.net/Te74S/), it works perfectly.

But in the production environnement I load a lot of js files and the function onPlayerReady is never called it seems.

So I'm getting errors like "Uncaught TypeError: undefined is not a function" about the playVideo and stopVideo functions. Any idea on where the problem comes from?

Thanks

1
javascriptjqueryyoutubeyoutube-javascript-api

1 Answers

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

should be

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

The player targets an id not a class.