Play video portions

index.html

<h1>Tutorial</h1> 
<div id="player"></div>
<section>
<a href="#" onClick="playThis(36,88)">1. Create the project</a> <br>
<a href="#" onClick="playThis(89,163)">2. Update client app</a> <br>
<a href="#" onClick="playThis(164,284)">3. Add logic for offers</a> <br>
<a href="#" onClick="pauseVideo()">Pause</a>
  </section>
<div style="font-size: 12px;  text-align: center;  color: #666;   width: 100vw;max-width:100%; opacity: 0.5;padding:5px 0;">Follow me on <a href="http://twitter.com/nodws" target="_b" style="color: #99b">Twitter</a> new <a href="http://codepen.com/nodws" target="_b" style="color: #99b">Pen</a> each week</div>

Play video portions.markdown

Play video portions

Code excellent for tutorials or to compile various clips in one video

A Pen by Nodws on CodePen.

License.

script.js

 var tag = document.createElement('script');

      tag.src = "https://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', {
          height: '500',
          width: '1000',
          videoId: 'ZZNb1NOPTp8',
          suggestedQuality: 'small'
          
        });
      }

   
      var end;
    // from second 's', to second 'e'
      function playThis(s,e) {
        window.clearTimeout(end);
        player.seekTo(s,true);
        player.playVideo();
        e = e - s; //replace this with an algorithm  for minutes if needed
      end =  setTimeout(pauseVideo,e*1000);
      }

      
      function pauseVideo() {
        player.pauseVideo(); //Pause dont stop() it will also stop buffering 
      }
 

style.css

body{
  background: #eee;
  text-align:center;
  font-family:sans-serif;
  color:#666
}
section a{
  color:#fff;
  background:#06c;
  padding:10px 30px;
  text-decoration:none;
  display:inline-block;
  margin:5px;
  transition:all 0.2s
}
a:hover{
  background:#666
}
iframe{
  max-width:100%
}