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

【问题标题】：on click image, expand div and play video点击图片，展开 div 并播放视频
【发布时间】：2016-06-17 00:55:25
【问题描述】：

我想要的是将一个 DIV 分成两部分，这样当单击左侧 DIV 时，它会展开到全高并开始播放视频，同时使用关闭按钮将其关闭时，视频会暂停，左侧 DIV 会重新恢复它的正常高度和宽度。我发现这段代码是我正在寻找的，但现在我必须添加 iframe 并让它在单击播放和关闭按钮时播放和暂停：

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

有什么想法吗？谢谢！

【问题讨论】：

你能显示你已经拥有的代码吗？

标签： javascript jquery html youtube

【解决方案1】：

正如完整的 YouTube 播放器 API here 中所述，您需要创建一个空的 div，其 id 为 player 以供此脚本挂钩。一旦onPlayerReady 事件触发，您可以挂钩到脚本创建的javascript player 对象，并使用它通过player.playVideo() 之类的调用来操作视频播放器。然后可以像任何其他 DOM 元素一样修改替换空 div 的 iframe，以更改视频播放器的大小。

注意：我提供的脚本是从原始 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>

【讨论】：