，展开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>