，展開div並播放視頻

Question

我想要的是將DIV分成兩部分，這樣當點擊左邊的DIV時，它將展開到全高並開始播放視頻，同時用關閉按鈕關閉它，視頻暫停，左邊的DIV恢復正常的高度和寬度。 我發現這個代碼whitch是林尋找，但現在我必須添加iframe中，使其播放和暫停的同時單擊播放和關閉按鈕：

[1]: http://jsfiddle.net/davidThomas/CFNUJ/1/ 

任何想法？ 謝謝！

Answer 1

正如完整的YouTube播放器API here中所述，您需要創建一個帶有播放器ID的空白div，以便將該腳本掛入。一旦onPlayerReady事件觸發，您可以將該腳本創建的javascript player對象掛鉤，並使用它來調用視頻播放器，如player.playVideo()。替換空白div的iframe可以像其他任何DOM元素一樣進行修改，以更改視頻播放器的大小。

注：我提供從原來的API例如砍伐，以免它6秒鐘

<script> 
    // 2. This code loads the 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. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

    function onPlayerStateChange(){ 
    //Do Nothing for now 
    } 

</script>