javascript - Multiple youtube players? -

i want have 2 youtube players:
1. vissible , play start till end in loop.
2. hidden , play lets 10 seconds 20 seconds in loop.

i have 2 scriptsm works separatedly, not work together, not sure how combine them in 1 function.

can help?

first player: https://pastebin.com/vhx2qj5r          second player: https://pastebin.com/pge6mm7q 

this hidden player loops: http://jsbin.com/zuxoxoqeko/edit?html,js,output

this normal player: http://jsbin.com/bibafewave/edit?html,js,output

javascript

      // 2. code loads 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. function creates <iframe> (and youtube player)       //    after api code downloads.       var player;       function onyoutubeiframeapiready() {         player = new yt.player('player', {           height: '315',           width: '560',           videoid: 'kf4gkhsrb2w',           events: {             'onready': onplayerready,             'onstatechange': onplayerstatechange           }         });       }       // 4. api call function when video player ready.       function onplayerready(event) {            event.target.setvolume(0);        event.target.playvideo();       }       // 5. api calls function when player's state changes.       //    function indicates when playing video (state=1),       //    player should play 6 seconds , stop.       var done = false;       function onplayerstatechange(event) {         if (event.data == yt.playerstate.playing && !done) {     //      settimeout(stopvideo, 6000);                   done = true;         }            event.target.setvolume(0);       }            // 2. code loads 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);  var section = {   start: 30,   end: 58 };  // 3. function creates <iframe> (and youtube player) //    after api code downloads. var player1; function onyoutubeiframeapiready() {   player1 = new yt.player(     'player1',     {       height: '0',       width: '0',       videoid: 's5xdk7dnmbw',       events: {         'onready': onplayerready1,         'onstatechange': onplayerstatechange1       }     }   ); }  function onplayerready1(event) {   player1.seekto(section.start);   player1.playvideo(); }  function onplayerstatechange1(event) {   if (event.data == yt.playerstate.playing) {     var duration = section.end - section.start;     settimeout(restartvideosection1, duration * 1000);   } }  function restartvideosection1() {   player1.seekto(section.start); } 

html

<div class="video-embed" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #c8c8c8; box-shadow: 0 4px 10px -1px #c8c8c8 !important;"> <div id="player"> </div> </div>  <div class="video-embede" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #c8c8c8; box-shadow: 0 4px 10px -1px #c8c8c8 !important;"> <div id="player1"> </div> </div> 

//video 1  var player;    function onplayerready(event) {      event.target.setvolume(0);      event.target.playvideo();  }  var done = false;    function onplayerstatechange(event) {      if (event.data == yt.playerstate.playing && !done) {          //      settimeout(stopvideo, 6000);          done = true;      }      event.target.setvolume(0);  }    //video 2  var section = {      start: 30,      end: 58  };    var player1;    function onplayerready1(event) {      player1.seekto(section.start);      player1.playvideo();  }    function onplayerstatechange1(event) {      if (event.data == yt.playerstate.playing) {          var duration = section.end - section.start;          settimeout(restartvideosection, duration * 1000);      }  }    function restartvideosection() {      player1.seekto(section.start);  }    //render video  function onyoutubeiframeapiready() {      player = new yt.player('player', {          height: '315',          width: '560',          videoid: 'kf4gkhsrb2w',          events: {              'onready': onplayerready,              'onstatechange': onplayerstatechange          }      });      player1 = new yt.player(          'player1', {              height: '0',              width: '0',              videoid: 's5xdk7dnmbw',              events: {                  'onready': onplayerready1,                  'onstatechange': onplayerstatechange1              }          }      );  }  var tag = document.createelement('script');  tag.src = "https://www.youtube.com/iframe_api";  var firstscripttag = document.getelementsbytagname('script')[0];  firstscripttag.parentnode.insertbefore(tag, firstscripttag);

<div class="video-embed" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #c8c8c8; box-shadow: 0 4px 10px -1px #c8c8c8 !important;">  <div id="player">  </div>  </div>    <div class="video-embede" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #c8c8c8; box-shadow: 0 4px 10px -1px #c8c8c8 !important;">  <div id="player1">  </div>  </div>

you're using same names of elements , variables both. use different name each of them.