动态播放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() { 
    //... 
}