title: change html5 background video source
body: <p>I want to change background video source depending on the size of the window.
  To minimize navigation traffic I don't want to change the video through CSS.</p>
  
  <p>I tried to do this:</p>
  
  <pre><code>&lt;script&gt;
  function chsrc() {
      var larghezza_browser = window.innerWidth || document.body.clientWidth;
      if ( larghezza_browser &gt; 1540 ) {
          console.log('carico il video grande - larghezza: ' + larghezza_browser + 'px');
          document.getElementById("mp4_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_grande.mp4";
          document.getElementById("webm_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_grande.webm";
      } else {
          console.log('carico il video piccolo - larghezza: ' + larghezza_browser + 'px');
          document.getElementById("mp4_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_piccolo.mp4";
          document.getElementById("webm_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_piccolo.webm";
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Added <code>&lt;body onload="chsrc()" onresize="chsrc()"&gt;</code></p>
  
  <p>And the html:</p>
  
  <pre><code>&lt;video autoplay loop muted id="video_home"&gt;
  &lt;source id="mp4_desktop" type="video/mp4" /&gt;
  &lt;source id="webm_desktop" type="video/webm" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>In chrome console it seems to work but I can't see the video
  <a href="https://i.stack.imgur.com/2kXDk.jpg" rel="nofollow noreferrer">html chrome developer tools</a></p>
  
  <p><a href="https://i.stack.imgur.com/h5vhk.jpg" rel="nofollow noreferrer">console log chrome developer tools</a></p>
  
  <p>do you know what I'm wrong about?</p>
  
  <p>Thanks</p>
  
  <p>Fosco</p>