title: JQuery Autoplaying Youtube videos on scroll
body: <p><strong>Issue: I'm attempting to have a YouTube video auto-play when the user scrolls to it and stops when the user scrolls past it.</strong></p>
  
  <p>Constraints: New to JavaScript web development.</p>
  
  <p>Tried: Going off of <a href="https://jsfiddle.net/kmsdev/gsfkL6xL/" rel="nofollow noreferrer">https://jsfiddle.net/kmsdev/gsfkL6xL/</a> I copy pasted line for line just to get it to work. I'm familiar with C++ and Java so I can at least read the main points of the code. It seems that I have the code correct but I might not be calling it correctly within my HTML5?</p>
  
  <p>Hero Section:</p>
  
  <pre><code>&lt;section class="video_background"&gt;
      &lt;div class="video_foreground"&gt;
          &lt;iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>JS Section:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/scroll.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
  </code></pre>
  
  <p>I have this on top of <a href="https://jsfiddle.net/kmsdev/gsfkL6xL/" rel="nofollow noreferrer">https://jsfiddle.net/kmsdev/gsfkL6xL/</a> but that shouldn't matter.    </p>