title: Play Youtube Video in Viewport
body: <p>I am looking to have a YouTube video start playing as the iframe enters the viewport.</p>
  
  <pre><code>jQuery(document).ready(function() {
      var inner = jQuery("#auto-video iframe");
      var elementPosTop = inner.position().top;
      var viewportHeight = jQuery(window).height();
     jQuery(window).on('scroll', function() {
          var scrollPos = jQuery(window).scrollTop();
          var elementFromTop = elementPosTop - scrollPos;
  
          if (elementFromTop &gt; 0 &amp;&amp; elementFromTop &lt; elementPosTop + viewportHeight) {
              inner.get(0).play();
          } else {
             inner.get(0).pause();
          }
      });
  </code></pre>
  
  <p>This returns a "play is not a function" message in the console.</p>
  
  <p>EDIT</p>
  
  <pre><code>&lt;div id="auto-video"&gt;
     &lt;iframe width="450" height="253" src="https://www.youtube.com/embed/wCdl3nGPDgE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  </code></pre>