未在Flexslider中播放Youtube視頻

Question

Youtube視頻不在我的flexslider圖庫中播放？有沒有一個已知的問題，我做了相當廣泛的搜索沒有找到任何答案。我不覺得我需要提供我的任何代碼，它只是一個簡單的圖像和視頻列表（視頻效果很好）滑塊。我沒有使用YouTube API，我需要嗎？

感謝所有幫助:)

Answer 1

感謝Beth的代碼，我注意到Flexslider選項設置'video：true'。

我添加了視頻設置，現在我的Youtube視頻正在播放，我沒有使用YT API。

Answer 2

我確實需要使用YouTube API爲我工作。以下代碼允許我暫停flexslider，播放視頻，並在完成後恢復flexslider。

var player, firstScriptTag, tag = document.createElement('script'); 

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

//called when iframe api loaded 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', {  
     width: 960, 
     height: 540, 
     videoId: 'XXXX', 
     playerVars: { 'autoplay': 0, 'showinfo': 0, 'loop': 1, 'rel': 0, 'vq': 'hd1080', 'controls': 0 }, 
     events: {     
      'onStateChange': function(event) { 
        controlSlider(event); 
      } 
     } 
     }); 
} 

//manually control video 
function toggleVideo(state) { 
    if(state == "pause") { 
     player.pauseVideo(); 
    } else { 
     player.playVideo(); 
    } 
} 

//play or pause flexslider based on youtube event states 
function controlSlider(event) { 

    var playerstate=event.data; 
    console.log(playerstate); 
    if(playerstate==1 || playerstate==3){ 
     $('.flexslider.main').flexslider("pause"); 
    } 
    if(playerstate==2){   
     $('.flexslider.main').flexslider("play"); 
    } 
} 

//flexslider load after dom created 
$(window).load(function() { 
     $('.flexslider.main').flexslider({ 
      controlNav: true, 
      directionNav: false, 
      video: true, 
      pauseOnHover: false, 
      before: function (slider) { 
       //get next slide and find the video 
       var curSlide = $(".main li").eq(slider.animatingTo), 
        currentFrame = curSlide.find('iframe'); 

       //if video doesn't exist in slide, pause it 
       if (currentFrame.length == 0) { 
        toggleVideo('pause'); 
       } 
       else { 
        toggleVideo('play'); 
       } 
      } 
     }); 
});