title: HTML5 Video play once scrolled into view.
body: <p>I've got some fullscreen video backgrounds that I want to play once they're scrolled into view. </p>
  
  <p>The code I'm using for the video running is as follows.</p>
  
  <pre><code>&lt;video id="video_background" preload="false" autoplay="false" loop="loop" volume="0"&gt; &lt;source src="video.webm" type="video/webm"&gt; &lt;source src="video.mp4" type="video/mp4"&gt; Video not supported &lt;/video&gt; 
  </code></pre>
  
  <p>The full-screen side works great, the video plays and I'm very happy with how it all looks but I've got a couple of issues. </p>
  
  <ol>
  <li><p>Even at the point I'm at, the video isn't taking into account the autoplay="false" attribute. It's instantly playing as soon as the page loads. </p></li>
  <li><p>Can someone point me in the right direction to play html5 video when the section is scrolled into view? I'm using sections such as the following for each bit. </p></li>
  </ol>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;&lt;video id="video_background" preload="false" autoplay="false" loop="loop" volume="0"&gt; &lt;source src="video.webm" type="video/webm"&gt; &lt;source src="video.mp4" type="video/mp4"&gt; Video not supported &lt;/video&gt;&lt;/div&gt;&lt;/section&gt;
  </code></pre>
  
  <p>I can't find anything that will let me start a section when it scrolls into view. </p>
  
  <p>Any ideas?</p>