title: Expand div and play video on click image
body: <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="left-bg"&gt;
      &lt;img class="play-button" src="/play-100x100.png" width="100" height="100" alt="play" title="play"&gt;
  
      &lt;iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;div id="right-bg"&gt;
      &lt;text
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my jQuery:</p>
  
  <pre><code>jQuery(function($){
    $('#left-bg, #right-bg').click(
      function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('&lt;button class="show"&gt;Show all&lt;/button&gt;')
          .appendTo('#wrapper');
      });
  
    $('.show').live('click',
      function(){
        $('#left-bg').animate(
          {
            'width': '50%'
          },600);
        $('#right-bg').animate(
          {
            'width': '50%'
          },600);
      $(this).remove();
    });
  });
  </code></pre>
  
  <p>What I want is to have a DIV divided in two, so that when clicking on the left DIV it expands to full height and starts playing the video, while closing it with a close button, the video pauses and the left DIV regains its normal height and width.</p>