title: media queries for HTML5 background video
body: <p>I need help with my new website. I have a HTML5 background video on autoplay. The video is self hosted. The problem is, when the page shrinkes, it obviously looks nasty. Actually, the video does not play when viewed on a smartphone.
  Here is the code for my video :</p>
  
  <pre><code>                &lt;video id="background_video" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/Deer_Picture.png"&gt;
                  &lt;source src="img/deer_eating_leaves.mp4" type="video/mp4"&gt;
                  &lt;source src="img/deer_eating_leaves.webm" type="video/webm"&gt;
                  Sorry, your browser does not support HTML5 video.
              &lt;/video&gt;
  </code></pre>
  
  <p>And the CSS : </p>
  
  <pre><code>video { 
  position: relative;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 90%;
  width: auto;
  height: auto%;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);}
  </code></pre>
  
  <p>I would like to have a green background instead of the video when viewed on a smartphone. To understand what's going on, here is the website : repeltecusa.com
  As well, I would like the h2 text to take all the space. I am currently using <code>vw</code> instead of <code>px</code> or <code>em</code> for the text so that it shrinkes on small devices.</p>
  
  <p>Thanks</p>