title: How to stop html5 video from playing when out of viewport?
body: <p>I'm facing this problem with skrollr: everything goes fine, then when adding a video, it continues playing if out of viewport, even if the div has a display:none declaration. I tried searching here and Google but couldn't find anything and at this point I'm really lost. </p>
  
  <p>For reference, this is the code I'm using:</p>
  
  <pre><code>&lt;div id="seventh" class="view" data-0="display:none;top:0%;" data-27000="display:block;opacity:0;" data-29000="opacity:1;" data-32000="opacity:0;" &gt;
  
  &lt;video id="video" class="video-js vjs-default-skin" controls preload="none" width="1223" height="611" poster="img/poster.jpg" data-setup="{}"&gt;
  &lt;source src="videos/vid.webm" type='video/webm' /&gt;
  &lt;source src="videos/vid.mp4" type='video/mp4' /&gt;
  
  &lt;/video&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>any help on how to achieve this really appreciated</p>