插件在彈出窗口中播放視頻

Question

有誰知道一個很好的插件，可以幫助我完成以下操作： 我在網站上有一張圖片。一旦這張圖片被點擊，視頻播放器就會在屏幕的中心打開。該視頻是從YouTube上播放的。下面是該網站表示我想要什麼 - http://thumb.it/（見視頻畫面右側的watch our video標誌下

Answer 1

我幾年前做這個確切的事情，使用jQuery的fancybox插件（http://fancyapps.com/fancybox/）有。非常好可能是更好的彈出窗口/模式窗口的選擇，雖然我很滿意fancyBox，因爲它很容易處理。

FancyBox解決了點擊視頻縮略圖鏈接時顯示彈出窗口的問題。 ，你可以嵌入YouTube視頻（或HTML，或圖像，或任何東西 - 不只是視頻）。

直接在風扇cyBox文檔頁面，他們鏈接到這個JsFiddle：http://jsfiddle.net/M78zz/，它演示瞭如何從彈出鏈接啓動YouTube視頻。小提琴還演示瞭如何在第一個完成播放時使用YouTube API轉到下一個視頻。

這裏的的jsfiddle代碼：

HTML

<!-- This loads the YouTube IFrame Player API code --> 
<script src="http://www.youtube.com/player_api"></script> 

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque">Video #1</a> 

<br /> 

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?enablejsapi=1&wmode=opaque">Video #2</a> 

的JavaScript

// Fires whenever a player has finished loading 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

// Fires when the player's state changes. 
function onPlayerStateChange(event) { 
    // Go to the next video after the current one is finished playing 
    if (event.data === 0) { 
     $.fancybox.next(); 
    } 
} 

// The API will call this function when the page has finished downloading the JavaScript for the player API 
function onYouTubePlayerAPIReady() { 

    // Initialise the fancyBox after the DOM is loaded 
    $(document).ready(function() { 
     $(".fancybox") 
      .attr('rel', 'gallery') 
      .fancybox({ 
       openEffect : 'none', 
       closeEffect : 'none', 
       nextEffect : 'none', 
       prevEffect : 'none', 
       padding  : 0, 
       margin  : 50, 
       beforeShow : function() { 
        // Find the iframe ID 
        var id = $.fancybox.inner.find('iframe').attr('id'); 

        // Create video player object and add event listeners 
        var player = new YT.Player(id, { 
         events: { 
          'onReady': onPlayerReady, 
          'onStateChange': onPlayerStateChange 
         } 
        }); 
       } 
      }); 
    }); 

} 

CSS

.fancybox-nav { 
    width: 60px;  
} 

.fancybox-nav span { 
    visibility: visible; 
} 

.fancybox-next { 
    right: -60px; 
} 

.fancybox-prev { 
    left: -60px; 
}