javascript - Youtube Iframe Api not loading video -

i have page has empty div @ first , when clicking on button, open 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 external file) :

$(document).ready(function() {  var isopen = false;  // 2. code loads 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. function creates <iframe> (and youtube player) //    after 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 here     console.log(player); }   function stopvideo() {     player.stopvideo();     player.clearvideo(); }  function dooverlayopen() {     // ...     player.playvideo(); }  function dooverlayclose() {     // ...     player.stopvideo(); }  $('a.launchlink').click(dooverlayopen); 

when trying code in "testing" environnement (so button, test: http://jsfiddle.net/te74s/), works perfectly.

but in production environnement load lot of js files , function onplayerready never called seems.

so i'm getting errors "uncaught typeerror: undefined not function" playvideo , stopvideo functions. idea on problem comes from?

thanks

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

should be

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

the player targets id not class.