Youtube api video auto playing when page scroll

Question

How to play youtube video automatically when user scrolls page with several youtube videos (like on twitter and Facebook). When scrolling to video - autoplay youtube video.

Answer 1

Here is what you have to do.

To make an embedded video autoplay, add “&autoplay=1” to the video’s embed code, right after the video ID (the series of letters that follows “v/”).

Here’s an example:

<object height="350" width="425"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" /><embed height="350" src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425"></embed></object>

If you want to have more functionalities with the embedded video you can visit this page.

Answer 2

https://github.com/olssonandreas/youtubeautoplay

Simple javascript project that shows how you can autoplay multiple videos on the same page. The autoplay starts when the video is in the viewport.

Answer 3

Even though this is an old thread, I found a solution and thought I'd post it in-case it's useful for anyone.

Using the code below, it will play the embedded YouTube video when the user scrolls to your element. Just fill in "#YourElement" with the element that will play the video when they scroll to it. Finally, give your iFrame and ID attribute and change "#YourIFrame" to whatever you called the ID of your iFrame.

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