Как добавить несколько youtube видео через API?

Question

[zuraavl]

Нашел скрипт для подключения видео с ютуба на весь экран с нужными параметрами. А на странице несколько видео.
Но основе существующих инструкций, не понял куда нужно вставить нужные переменные.
https://codepen.io/Zuraavl/pen/aaGZwe

var tag = document.createElement('script');
		tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
		playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3, playsinline: 1,};


var vid = [
			{'videoId': 'TiFKHFnPlK8', 'suggestedQuality': 'hd720'}
		],
		randomVid = Math.floor(Math.random() * vid.length),
    currVid = randomVid;

$('.hi em:last-of-type').html(vid.length);

function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}

function onPlayerReady(){
  tv.loadVideoById(vid[currVid]);
  tv.mute();
}

function onPlayerStateChange(e) {
  if (e.data === 1){
    $('#tv').addClass('active');
    $('.hi em:nth-of-type(2)').html(currVid + 1);
  } else if (e.data === 2){
    $('#tv').removeClass('active');
    if(currVid === vid.length - 1){
      currVid = 0;
    } else {
      currVid++;  
    }
    tv.loadVideoById(vid[currVid]);
    tv.seekTo(vid[currVid].startSeconds);
  }
}

function vidRescale(){

  var w = $(window).width()+200,
    h = $(window).height()+200;

  if (w/h > 16/9){
    tv.setSize(w, w/16*9);
    $('.tv .screen').css({'left': '0px'});
  } else {
    tv.setSize(h/9*16, h);
    $('.tv .screen').css({'left': '0px'});
  }
}

$(window).on('load resize', function(){
  vidRescale();
});

$('.hi span:first-of-type').on('click', function(){
  $('#tv').toggleClass('mute');
  $('.hi em:first-of-type').toggleClass('hidden');
  if($('#tv').hasClass('mute')){
    tv.mute();
  } else {
    tv.unMute();
  }
});

$('.hi span:last-of-type').on('click', function(){
  $('.hi em:nth-of-type(2)').html('~');
  tv.pauseVideo();
});

Answer 1

[Олег]

https://codepen.io/anon/pen/eLrBJR

var vid = [
      {'videoId': 'TiFKHFnPlK8', 'suggestedQuality': 'hd720'},
      {'videoId': 'TiFKHFnPlK8', 'suggestedQuality': 'hd720'},
      {'videoId': 'TiFKHFnPlK8', 'suggestedQuality': 'hd720'},
      {'videoId': 'TiFKHFnPlK8', 'suggestedQuality': 'hd720'}
    ]

Comments

[zuraavl]

А как объявить айди блока в котором будет загружаться видео и айфрейм? Я так понял это происходит в переменной tv и объявляется здесь

function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}

[Олег]

правильно. а еще из блока .hi вы выкинули какие то элементы. в коде остались куски завязанные на них.
управление звука было на втором дочернем элементе.

[zuraavl]

Я все же не понимаю куда добавить список id элементов в которых будет загружаться плеер