Autoplay Youtube Video When Scrolled to

后端未结

关注

 3  1390

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 c

相关标签:

3条回答

借酒劲吻你

2020-12-30 16:10

<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>

0 讨论(0)

醉酒成梦

2020-12-30 16:21

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");
}

0 讨论(0)

南旧

2020-12-30 16:29

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>

0 讨论(0)