Autoplay youtube video (с помощью youtube api) при прокрутке до

Question

Есть ли способ для видео YouTube для автовоспроизведения, когда видео находится на экране (при прокрутке)?

Я получил раздел моего сайта, который выглядит следующим образом:

<!-- Home --> 
    <section id="home" class="container relative pattern-black"> 
     <!-- Ful Screen Home --> 
     <div id="fullscreen" class="fullscreen pattern-black soft-bg-1 z-1"> 
      <!-- Video --> 
      <div id="P2" class="player video-container" data-property="{videoURL:'gpSSGCf9nHY',containment:'#fullscreen',autoPlay:true, showControls:true, mute:false, startAt:0, opacity:0.2}"></div> 
      <!-- End Video --> 
     </div> 
     <!-- End Ful Screen Home --> 

     <!-- Home Elements v2 --> 
     <div class="home-elements"> 
      <!-- Home Inner --> 
      <div class="home-inner v2 t-center"> 

       <!-- Home Text Slider --> 
       <div class="home-text-slider relative"> 
        <div class="text-slider clearfix"> 
         <!-- Home Text Slides --> 
         <ul class="home-texts clearfix t-center semibold"> 
          <li class="slide white uppercase">we are create awesome themes!</li> 
          <li class="slide white uppercase">We are creative designers</li> 
          <li class="slide white uppercase">we love to designing</li> 
         </ul> 
         <!-- End Home Text Slides --> 
         <!-- Home Fixed Text --> 
       <h1 class="home-fixed-text t-center">Welcome to <span class="gray-tone">North!</span> We love to design. We are happy with <span class="gray-tone">you are !</span></h1> 
        </div> 
       </div> 
       <!-- End Home Text Slider --> 

       <!-- Home Button --> 
       <a href="#" target="_blank" class="home-button-1 uppercase oswald semibold gray"> 
        purchase 
       </a> 

       <!-- Home Button --> 
       <a href="#about" class="scroll home-button-1 uppercase oswald semibold gray"> 
        read more 
       </a> 
      </div><!-- End Home Inner --> 
     </div><!-- End Home Elements --> 
    </section><!-- End Home Section --> 

Это код, который используется для видео (jquery.mb.YTPlayer.js):

http://jsfiddle.net/55omdr0o/

Answer 1

Я нашел способ сделать это.

С помощью плагина jQuery waypoints вы можете обнаружить, когда пользователь прокручивает элемент.

ДИВ с видео имеет идентификатор «P2», поэтому я добавил этот код на страницу с видео:

<script> 
// Use waypoints.min.js to detect if the user is at div with id P2 
$(function() { 
    $('#P2').waypoint(function() { 
     $('#P2').playYTP(); 
    }); 
}); 
</script> 

Вы можете найти здесь: путевые точки https://github.com/imakewebthings/jquery-waypoints