title: HTML5 video behavior on mobile devices
body: <p>I am building a site where I have several <code>&lt;video&gt;</code> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.<br/>When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:</p>
  
  <pre><code>window.onload = function() {
      var pElement = document.getElementById("myVideo");
      pElement.load();
      pElement.play();
  };
  </code></pre>
  
  <p>But this will again open the video(s) in a seperate window...</p>
  
  <p>Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!</p>
  
  <p><strong>EDIT:</strong>
  Markup is basic <code>&lt;video&gt;</code>-syntax btw:</p>
  
  <pre><code>&lt;video autoplay loop&gt;
      &lt;source src="vid.mp4" type="video/mp4" /&gt;
      &lt;source src="vid.ogg" type="video/ogg" /&gt;
      &lt;source src="vid.webm" type="video/webm" /&gt;
  &lt;/video&gt;
  </code></pre>