The Easiest Way to Auto Play Youtube Videos when Scrolled to (based on jQuery)

There are a lot of ways to play/pause youtube player when it is visible on screen but they are so complicated!

I would like to share my way, I think it’s easiest way because it fast, requires a little iframe code changing and works perfectly.

Here is a manual:

      1. Open your youtube video which you wish to share.
      2. Click on Share tab, choose HTML-code and copy it. For example:
        <iframe width="560" height="315" src="https://www.youtube.com/embed/vahNh3S2p7s" frameborder="0" allowfullscreen></iframe>
      3. Add autoplay-video ID to the iframe, so it should be like this:
        <iframe width="560" height="315" src="https://www.youtube.com/embed/vahNh3S2p7s" frameborder="0" allowfullscreen id="autoplay-video"></iframe>
      4. Add «?enablejsapi=1» to the src attribute:
        <iframe width="560" height="315" src="https://www.youtube.com/embed/vahNh3S2p7s?enablejsapi=1" frameborder="0" allowfullscreen id="autoplay-video"></iframe>
      5. Copy and paste the following code to your page/web-site:
      6. Done!

What you will receive:

  • Video auto play when player is fully visible on screen
  • Auto pause in other case
  • Autoplay/pause disabling if the cursor was positioned in a player. There is no way to detect clicks on Youtube player so I have to use «mouseleave» event. It’s necessary to disable autocontrol in situations when users want to control the video on their own.

Demo is available at the bottom of this page.

























Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *