展开 div 并在点击图像上播放视频答案

【问题标题】：Expand div and play video on click image展开 div 并在点击图像上播放视频
【发布时间】：2016-03-03 14:11:34
【问题描述】：

这是我的 HTML：

<div id="wrapper">
  <div id="left-bg">
    <img class="play-button" src="/play-100x100.png" width="100" height="100" alt="play" title="play">

    <iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe>
  </div>
  <div id="right-bg">
    <text
  </div>
</div>

这是我的 jQuery：

jQuery(function($){
  $('#left-bg, #right-bg').click(
    function(){
      $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
      $('<button class="show">Show all</button>')
        .appendTo('#wrapper');
    });

  $('.show').live('click',
    function(){
      $('#left-bg').animate(
        {
          'width': '50%'
        },600);
      $('#right-bg').animate(
        {
          'width': '50%'
        },600);
    $(this).remove();
  });
});

我想要的是将一个 DIV 分成两部分，这样当单击左侧 DIV 时，它会展开到全高并开始播放视频，同时使用关闭按钮将其关闭时，视频会暂停，左侧 DIV 会重新恢复它的正常高度和宽度。

【问题讨论】：

您的 HTML 已损坏（神秘的“
查看 youtube iframe api 参考：developers.google.com/youtube/iframe_api_reference

标签： jquery html

【解决方案1】：

你需要做一些微调，但开始就在这里。

jQuery(function($) {
   $('#left-bg').click(
     function() {
       $(this).animate({
         'width': '100%'
       }, 600)
       $('#right-bg').animate({
         'width': '0%'
       }, 600);
       $('.show').fadeIn(600);
     });

   $('.show').on('click', function() {

     $('#left-bg').animate({
       'width': '50%'
     }, 600);
     $('#right-bg').animate({
       'width': '50%'
     }, 600);
     $(this).fadeOut(600);
   });
 });

* {
  box-sizing: border-box;
}

#wrapper {
  width: 600px;
  height: 300px;
  position: relative;
  display: inline-block;
}

#left-bg,
#right-bg {
  width: 50%;
  float: left;
  display: inline-block;
  overflow: hidden;
}

iframe {
  width: 100%;
  height: 100%; 
}

img {
  position: absolute;
}

.show {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="left-bg">
    <img class="play-button" src="/play-100x100.png" width="100" height="100" alt="play" title="play">

    <iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe>
  </div>
  <div id="right-bg">
    sdf
  </div>
  <button class="show">Close</button>
</div>

【讨论】：

谢谢，这可行，但它不会开始播放视频！我想要的是在播放时开始播放，然后在关闭时暂停

【解决方案2】：

根据您对 NiZa 答案的评论... 您可以在用户点击播放按钮之前使用 html5 视频海报显示图像。..

<video width="100%" height="100%" controls poster="images/image.png">
      <source src="videos/video.mp4" type="video/mp4">
      <source src="videos/video.ogg" type="video/ogg">
</video>

不客气..

【讨论】：