Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script src="https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>
  </head>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player1" class="player">a</div>
    <div id="player2" class="player">s</div>
    <div id="player3" class="player"></div>
    <div id="player4" class="player"></div>
    <div id="player5" class="player"></div>
​
<style type="text/css">
  
.player {
  margin-bottom: 110vh;
  border-top: 5px solid red;
  display: block;
}
​
</style>
​
<script>
  
​
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
​
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
​
// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var playerDivs = document.querySelectorAll(".player"); // get .player nodes
var playerDivsArr = [].slice.call(playerDivs); // nodelist to array to use forEach();
var players = new Array(playerDivsArr.length);
var waypoints = new Array(playerDivsArr.length);
​
// when youtube stuff is ready
function onYouTubeIframeAPIReady() {
  
  // create yt players
  playerDivsArr.forEach(function(e, i) { // forEach ...
    players[i] = new YT.Player(e.id, {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: { /* no events set */ }
    })
  })
​
  // create waypoints
  $(".player").each(function(i, e) {
    waypoints[i] = new Waypoint({
      element: e,
      handler: function() {
        players[i].playVideo();
      }
    })
  });
  
}
​
</script>
</body></html>
​
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers