Autoplay Youtube Video When Scrolled to

Question

Is there any way to autoplay a youtube video when you scroll to it on the page? I've tried to google this and it looks like theres some methods for the old youtube embed code. I'm looking for an updated version of this - does anyone know how to automatically play youtube videos when you scroll down a certain amount of pixels on a page?

Thanks for your help

score 4 · Answer 1 · edited May 23 '17 at 12:30

<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"/>

Use the above to play the video automatically. per your question to play it only when scrolled down, check this thread.

Triggering a video autoplay based on scroll position

Here is the complete code. have tested this on firefox and chrome. You can check the sample working here.

http://www.foftv.com/samplejs/vidscroll2.html

<html><head>
    <style>
    #e1, #e2, #e3, #e4, #e5, #  ytplayer{ 
        height:390px; width:640px; display: block;
        opacity: 0;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      // Load the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // Replace the 'ytplayer' element with an <iframe> and
      // YouTube player after the API code downloads.
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '390',
          width: '640',
          playerVars : {
                autoplay : 0
            },
          videoId: 'M7lc1UVf-VE'
        });
      }

      $(window).scroll(function() {
        $("iframe").each( function() {
            if( $(window).scrollTop() > $(this).offset().top - 200 ) {
                $(this).css('opacity',1);
                player.playVideo();
            } else {
                $(this).css('opacity',0);
                player.stopVideo();
            }
        }); 
    });

    </script>
    </head>
    <body>



    <div id="e1">Some element 1</div>
    <div id="e2">Some element 2</div>
    <div id="e3">Some element 3</div>
    <div id="ytplayer">Youtube player here</div>
    <div id="e4">Some element 4</div>
    <div id="e5">Some element 5</div>
    </body>
    </html>

Thanks for your response - will the method you posted work with a youtube video? — user3776906, Sep 30 '14 at 03:09
Yep. I have tried the Iframe and it works. you can try it here on my site where it plays youtube automatically. http://www.foftv.com/testyt.html — Sesha Kiran, Sep 30 '14 at 03:15
Thanks for the response - I'm able to get the autoplay working but only want it to autoplay when the user scrolls past a certain point. I tried the script you linked but it doesn't work for me. What did you use for the source in the snippet? — user3776906, Sep 30 '14 at 03:32

moz · Answer 2 · 2020-08-14T15:19:46.290

3

I'm aware this is an old question but I found a solution that fits my need perfectly so I thought I would share it. I found out you can actually append &autoplay=1 to the iframe src, it automatically plays the video.

$(window).scroll(function() {
 
//will trigger when your element comes into viewport
    var hT = $('#YourElement').offset().top,
    hH = $('#YourElement').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();



if (wS > (hT+hH-wH)){
    //appends &autoplay=1 to iFrame src, making it autoplay
    var videoUrl = $('#YourIFrame').attr('src');
    $('#YourIFrame').attr('src', videoUrl + "&autoplay=1");
}

edited Aug 14 '20 at 15:19

answered Aug 14 '20 at 14:36

moz

51
4

Great, Thanks, moz – Dev Solution Aug 14 '20 at 15:11
This might be useful for someone else `var pattern = /autoplay/; var apexists = pattern.test(videoUrl ); if (!apexists) { jQuery('#YourIFrame').attr('src', videoUrl + "&autoplay=1"); } ` – Sid Apr 24 '21 at 14:49

score 2 · Answer 3 · answered Apr 03 '18 at 15:48

I know it's a very old question, but I've been googling it and none of the answers worked for me, so this is the solution I ended up implementing:

<div id="video-box">
    <iframe id="i_video" src="" frameborder="0" allowfullscreen></iframe>
</div>
<script>
    window.onscroll = function() {
        var dv = document.getElementById('video-box');
        var v = document.getElementById('i_video');
        if ((window.scrollY < (dv.offsetTop + dv.offsetHeight)) && ((window.scrollY + window.outerHeight) > dv.offsetTop)) {
            if (v.src=='' || v.src==location.href) {
                v.src='VIDEO_URL';
            }
        } else {
            v.src='';
        }
    }
</script>

Autoplay Youtube Video When Scrolled to

3 Answers3

Linked