title: Play video only when scrolled into view
body: <p>On this side scrolling page <a href="https://happyprime01.worldsecuresystems.com/video-test.html" rel="nofollow noreferrer">https://happyprime01.worldsecuresystems.com/video-test.html</a> there is a video on the third and fourth page/panel. I want the video in the third panel to only start playing once the panel is in view. I have the following which uses the jquery.appear plugin mentioned <a href="https://stackoverflow.com/questions/26119420/html5-video-play-once-scrolled-into-view?rq=1">here</a> </p>
  
  <p>But I can not get it to work. Below is what I am trying. Can anybody assist with this please?</p>
  
  <pre><code>    &lt;div id="item3" class="item"&gt;                   
  
              &lt;!--video fills page section --&gt;
              &lt;div class="fullscreen-bg"&gt;
                  &lt;video id="vid-P" muted poster="img/bg-dynamically.jpg" class="fullscreen-bg__video  video-powder"&gt;
                      &lt;source src="img/PowderPuff.mp4" type="video/mp4"&gt;
                  &lt;/video&gt;
              &lt;/div&gt;                                             
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end--&gt;
  
      &lt;script type="text/javascript" src="js/jquery.appear.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          var myVideo = document.getElementById('vid-P');
  
      //when div with id item3 is in view play video
     $('#item3').on('appear', function(event, $all_appeared_elements) {
  
  
          if (appear) {
                // element is now visible in the viewport
               $("#item3").on('appear', myVideo.play);
              } else {
                // element has gone out of viewport
               $("#item3").on('disappear', myVideo.pause);
              }
    });
  
  
      &lt;/script&gt;
  </code></pre>