title: Pause and play video when in viewport
body: <p>I was experimenting with play and pause when a video is within the viewport...
  when I was searching around I found the following code.. which unfortunately didn't work:</p>
  
  <p>jQuery</p>
  
  <pre><code>    $(window).scroll(function(){
          if ($(window).scroll(100)){
              $('#video').play;
          }
      });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;video preload="auto" loop="loop" id="background"&gt;
          &lt;source src="background/background1.mp4" type="video/mp4"&gt; &lt;/source&gt;
          &lt;source src="background/background1.webm" type="video/webm"&gt; &lt;/source&gt;
      &lt;/video&gt;
  </code></pre>
  
  <p>I've also tried the code on the following page: <a href="http://serversideguy.com/2014/02/05/play-youtube-videos-on-scroll-over/" rel="nofollow">http://serversideguy.com/2014/02/05/play-youtube-videos-on-scroll-over/</a></p>
  
  <p>but I couldn't get it to work either, is there anyone who could point me in the right direction?</p>
  
  <p>Is it even practical to play and pause video's when in / out of the viewport, wouldn't users be startled by sounds suddenly appearing?</p>