動態播放youtbe視頻

Question

我試圖通過點擊div來加載YouTube視頻。這個想法是動態地將視頻ID傳遞給播放器對象並將視頻加載到一個幀中。我正在關注這個API，並且我看到他們正在傳遞這個dom，然後加載JS。在我的情況下，這是不可能的。

這裏是我的JS

callMain(); 

function playerApp(inputVid) { 
    var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: inputVid, 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 
} 

function backgroundOverlay(state){ 

    var pageHeight = $(document).height(); 
    var overlay = ''; 
    var wrapperHTML = '' 
     + '<div class="videoplayer-wrapper">' 
      + '<div id="player"></div>' 
      + '<div class="videoplayer-close videoplayer-toggle">Close</div>' 
     + '</div>'; 

    if(state){ 
     overlay = $('body').append('<div class="video-overlay-background" style="height:'+pageHeight+'px;"></div>').append(wrapperHTML); 
    }else{ 
     overlay = $('.video-overlay-background').remove(); 
    } 

    return overlay; 
} 


function callMain() //$(function(){ 
    { 
    var tag = document.createElement('script'); 

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

    var inputVid = ''; 
    $('.videoplayer-toggle').on('click', function(){ 
     inputVid = $(this).attr('data-youtubeid'); 
     backgroundOverlay(true); 
     playerApp(inputVid) 

     $('.videoplayer-close').on('click', function(){ 
      backgroundOverlay(false); 
      $('.videoplayer-wrapper').remove() 
     }) 

    }); 
} 

這是我的小提琴。任何幫助將高度讚賞

http://jsfiddle.net/sghoush1/zmqj6h1b/1/

Answer 1

的問題是，onYouTubeIframeAPIReady永遠不會觸發。您可以完全忽略它，因爲您在playerApp內動態設置播放器。請嘗試以下操作：

function playerApp(inputVid) { 
    var player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: inputVid, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 
function onPlayerReady() { 
    //... 
} 
function onPlayerStateChange() { 
    //... 
}