Youtube On Scroll

I'm attempting to have a YouTube video auto-play when the user scrolls to it and stops when the user scrolls past it. This works fine thanks to this post 'JQuery Autoplaying Youtub

Solution 1:

you should be used append not innerHTML.

original:

wrap.innerHTML += '<divclass="newData"><iframestyle="margin-top:0px"id="playerD"frameborder="0"title="YouTube video player"type="text/html"src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframestyle="margin-top:0px"id="playerE"frameborder="0"title="YouTube video player"type="text/html"src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframestyle="margin-top:0px"id="playerF"frameborder="0"title="YouTube video player"type="text/html"src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><divstyle="height:500px"></div></div>';

edit:

$(wrap).append( '<divclass="newData"><iframestyle="margin-top:0px"id="playerD"frameborder="0"title="YouTube video player"type="text/html"src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframestyle="margin-top:0px"id="playerE"frameborder="0"title="YouTube video player"type="text/html"src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframestyle="margin-top:0px"id="playerF"frameborder="0"title="YouTube video player"type="text/html"src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><divstyle="height:500px"></div></div>' ); 

reference: jquery .html() vs .append()

hope it helps

UPDATE

create iframe with different id

functioncreateVideo( $element, url ) {
    $element.append( '<iframe style="margin-top:0px" id="player' + $( 'iframe' ).length + 1 + '" frameborder="0" title="YouTube video player" type="text/html" src="' + url + '"></iframe><br/>');
}
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
$(wrap).append( '<div style="height:500px"></div>');