pelid/video_demo.html

## video_demo.html
<!DOCTYPE html>
<html>
<head>
  <title>Video Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-9">
        <div id="player"></div>
      </div>
      <div class="col-sm-3">
        <button id="firstVideo" class="btn-block">видео 1</button>
        <button id="secondVideo" class="btn-block">видео 2</button>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script type="text/javascript">
    // вынести код в отдельный файл - библиотеку
    function initPlayer(element_id, playlist, cfg){
      window.player = new YT.Player(element_id, {
        width: cfg.width || 853, // минимальная ширина для 'large' качества видео
        height: cfg.height || 480, // минимальная высота для 'large' качества видео
        playerVars: {
          showinfo: 0, // убираем header с названием видео
          rel: 0, // отключаем related videos
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange,
        }
      });

      var activeVideoIndex = 0;
      var autostopVideo = false;

      function loadPlaylist(currentVideoIndex, autoplay){
        player.stopVideo();
        autostopVideo = !autoplay;

        var suggestedQuality = 'large'
        player.loadPlaylist({
          playlist: playlist,
          index: currentVideoIndex,
          suggestedQuality: suggestedQuality
        });
        activeVideoIndex = currentVideoIndex;
      }

      function onPlayerReady(event) {
        loadPlaylist(0, false)
      }

      function onPlayerStateChange(event){
        if (event.data == 0){
          onVideoFinished(player.getPlaylistIndex())
        }
        if (event.data == 1){
          if (autostopVideo){
            // Workaround. player.cuePlaylist() loads video in low resolution, so need call loadPlaylist instead
            // this logic will stop video playback if not required
            autostopVideo = false;
            player.stopVideo();
          }
          activeVideoIndex = player.getPlaylistIndex();
        }
      }

      function selectVideo(videoIndex){
        if (activeVideoIndex == videoIndex){
          player.playVideo();
          return
        }
        loadPlaylist(videoIndex, true);
      }

      var API_METHODS = {
        selectVideo: selectVideo,
      }
      return API_METHODS
    }
  </script>

  <script type="text/javascript">
    function onYouTubeIframeAPIReady() {
      var playlist = [
        // перечисляем ВСЕ видео
        '65vG2VOX5II',
        'uogNm0MGRhE',
      ]
      function onVideoFinished(index){
        // TODO
      }
      var playerAPI = initPlayer('player', playlist, {
        onVideoFinished: onVideoFinished,
        width: 780,
        height: 480,
      });

      $('#firstVideo').click(function(){
        playerAPI.selectVideo(0)
      })

      $('#secondVideo').click(function(){
        playerAPI.selectVideo(1)
      })
    }
</script>
  <script src="https://www.youtube.com/iframe_api" async="async"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Video Demo</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-sm-9">
	<div id="player"></div>
	</div>
	<div class="col-sm-3">
	<button id="firstVideo" class="btn-block">видео 1</button>
	<button id="secondVideo" class="btn-block">видео 2</button>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

	<script type="text/javascript">
	// вынести код в отдельный файл - библиотеку
	function initPlayer(element_id, playlist, cfg){
	window.player = new YT.Player(element_id, {
	width: cfg.width \|\| 853, // минимальная ширина для 'large' качества видео
	height: cfg.height \|\| 480, // минимальная высота для 'large' качества видео
	playerVars: {
	showinfo: 0, // убираем header с названием видео
	rel: 0, // отключаем related videos
	},
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange,
	}
	});

	var activeVideoIndex = 0;
	var autostopVideo = false;

	function loadPlaylist(currentVideoIndex, autoplay){
	player.stopVideo();
	autostopVideo = !autoplay;

	var suggestedQuality = 'large'
	player.loadPlaylist({
	playlist: playlist,
	index: currentVideoIndex,
	suggestedQuality: suggestedQuality
	});
	activeVideoIndex = currentVideoIndex;
	}

	function onPlayerReady(event) {
	loadPlaylist(0, false)
	}

	function onPlayerStateChange(event){
	if (event.data == 0){
	onVideoFinished(player.getPlaylistIndex())
	}
	if (event.data == 1){
	if (autostopVideo){
	// Workaround. player.cuePlaylist() loads video in low resolution, so need call loadPlaylist instead
	// this logic will stop video playback if not required
	autostopVideo = false;
	player.stopVideo();
	}
	activeVideoIndex = player.getPlaylistIndex();
	}
	}

	function selectVideo(videoIndex){
	if (activeVideoIndex == videoIndex){
	player.playVideo();
	return
	}
	loadPlaylist(videoIndex, true);
	}

	var API_METHODS = {
	selectVideo: selectVideo,
	}
	return API_METHODS
	}
	</script>

	<script type="text/javascript">
	function onYouTubeIframeAPIReady() {
	var playlist = [
	// перечисляем ВСЕ видео
	'65vG2VOX5II',
	'uogNm0MGRhE',
	]
	function onVideoFinished(index){
	// TODO
	}
	var playerAPI = initPlayer('player', playlist, {
	onVideoFinished: onVideoFinished,
	width: 780,
	height: 480,
	});

	$('#firstVideo').click(function(){
	playerAPI.selectVideo(0)
	})

	$('#secondVideo').click(function(){
	playerAPI.selectVideo(1)
	})
	}
	</script>
	<script src="https://www.youtube.com/iframe_api" async="async"></script>
	</body>
	</html>