title: How to make 2 videos side by side, centered, and responsive
body: <p>I am trying to add 2 videos side by side which are centered and spaced out correctly, and then want to make them responsive with the second video dropping down below the first video so that it can appear stacked on mobile devices. My Html that I am working with is:</p>
  
  <pre><code>&lt;div id="wrapper"&gt; 
    &lt;div id="home1"&gt;
     &lt;video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"&gt; 
       &lt;source type="video/mp4" src="images/stories/home1.mp4" /&gt; 
     &lt;/video&gt;
    &lt;/div&gt;
    &lt;div id="home2"&gt;
     &lt;video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"&gt; 
       &lt;source type="video/mp4" src="images/stories/home2.mp4" /&gt; 
     &lt;/video&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css so far is:</p>
  
  <pre><code>#wrapper { 
      width: 920px; 
      height: 350px; 
      margin: 0 auto; 
  } 
  
  #home1 { 
      width: 400px; 
      height: 300px; 
      float: left; 
  } 
  
  #home2 { 
      width: 400px; 
      height: 300px; 
      float: right; 
  }
  
  @media (max-width:767px) {
      .home1 {
          position: relative;
          padding-bottom: 56.25%; /* 16/9 ratio */
          padding-top: 30px; /* IE6 workaround*/
          height: 0;
          overflow: hidden;
      }
      .home2 {
          margin-left: 0;
      }
  }
  </code></pre>
  
  <p>Thanking you in advance</p>