Question

我想要的是将DIV分成两部分，这样当点击左侧DIV时它会扩展到全高并开始播放视频，同时用关闭按钮关闭它，视频暂停，左侧DIV重新获得它的正常高度和宽度。我发现这个代码很好看，但现在我必须添加iframe并让它播放并在点击播放和关闭按钮时暂停：

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

有什么想法吗？谢谢！

Answer 1

如完整的YouTube播放器API here中所述，您需要创建一个空白div，其ID为播放器，以便此脚本可以挂钩。触发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>

点击图片，展开div并播放视频

1 个答案: