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>
<meta charset=utf-8 />
<title>JS Bin</title>  
</head>
<body>
  <div class="wrapper">
    <div id="player"></div>
    <div id="video_popup" class="hide_pop">
      <div class="video_layover">
          <div class="promo">Thank you for watching!<br /><br /> 
      </div>
      <div class="link">
        <a href="javascript: chapter1();">Replay Video</a></div>
      </div>
    </div>  
      
    <div style="margin: 0 auto 20px auto; width:625px; height:98px; text-align:center;">
      <ul class="player">
        <a href="javascript: chapter1();"><li>Chapter 1</li></a>
        <a href="javascript: chapter2();"><li>Chapter 2</li></a>
        <a href="javascript: chapter3();"><li>Chapter 3</li></a>
      </ul>
    </div>
  </div>
  
<script type="text/javascript">
  var tag = document.createElement('script');
​
  tag.src = "http://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
​
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '625',
      videoId: 'FE5jN0rqMtM',
      events: {
        'onStateChange': onPlayerStateChange    
      },
      playerVars:{
        rel: 0,
        wmode: "opaque"
      }         
    });
  }
​
  function onPlayerStateChange(evt) {
    if (evt.data == 0) {
          $('#video_popup').removeClass('hide_pop');
          $('#video_popup').addClass('display_pop');
    }
    else if (evt.data == -1) {
          $('#video_popup').removeClass('display_pop');
          $('#video_popup').addClass('hide_pop');
    }
    else {
          $('#video_popup').removeClass('display_pop');
          $('#video_popup').addClass('hide_pop');
    }
  }
​
  function chapter1() {
    //player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 0});
      player.cueVideoById('FE5jN0rqMtM', 0);
      player.playVideo();
  }
​
  function chapter2() {
  //player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 63});
    player.cueVideoById('FE5jN0rqMtM', 63);
    player.playVideo();
  }
​
  function chapter3() {
  //player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 135});
    player.cueVideoById('FE5jN0rqMtM', 135);
    player.playVideo();
  }
​
</script>  
  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers