title: HTML5 media query video for different viewports (breakpoint not working)
body: <p>I am new to stackoverflow and I need some help in HTML5 and CSS3 as I am a newbie to responsive design / media queries. (I have used the forum search, but I couldn't find an answer on my question.)</p>
  
  <p>I would like to display different videos for different viewports.
  Could you guys help me to fix the following HTML code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>video {
   width:100%;
   height:auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="vid-container"&gt;
      &lt;video id="video" controls&gt;
          &lt;source src="vid/video1.mp4" type="video/mp4" media="all and (min-width: 1024 px)"&gt;
          &lt;source src="vid/video1.webm" type="video/webm" media="all and (min-width: 1024 px)"&gt;
          &lt;source src="vid/video2.mp4" type="video/mp4" media="all and (max-width: 1023 px)"&gt;
          &lt;source src="vid/video2.webm" type="video/webm" media="all and (max-width: 1023 px)"&gt;
      &lt;/video&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you guys a lot in advance for helpfull tipps, tricks and answers.
  Cheers!</p>