Corgan/ti5.html

## ti5.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>TI5 TI5 TI5 TI5 TI5</title>
  <style type='text/css'>
html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}
#streamContainer {
    display: inline;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#streamContainer > div {
  display: inline;
  position: absolute;
}

.main {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.sub {
    height: 236px;
    width: 420px;
    z-index: 2;
    opacity: 0.75;
}

.sub-1 {
    top: 50px;
    right: 10px;
}

.sub-2 {
    top: 290px;
    right: 10px;
}

#stream2blocker,
#stream3blocker {
 z-index: 10;
}
</style>

</head>
<body>
<div id="streamContainer">
    <div id="stream1" class="main">
        <div id="stream1-yt" data-yt="A6Bw9kzBoYI"></div>
    </div>
    <div id="stream2" class="sub sub-1">
        <div id="stream2-yt" data-yt="-b1fKfoQVqU"></div>
    </div>
    <div id="stream3" class="sub sub-2">
        <div id="stream3-yt" data-yt="eq-tC2rFSK0"></div>
    </div>

    <div id="stream2blocker" class="sub sub-1"></div>
    <div id="stream3blocker" class="sub sub-2"></div>
</div>
</div>


<script type='text/javascript'>//<![CDATA[
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onPlayerReady(i, e) {
    e.target.setVolume(0);
    e.target.playVideo();
    if(e.target.getIframe().parentNode.classList.contains('sub'))
      e.target.setPlaybackQuality('small');
}

  var res = location.href.split('?');
  hasYT = (res[1]);

  if(hasYT)
    ytIDs = res[1].split(',');
  var players = {}
  function onYouTubePlayerAPIReady() {
    for(var i=1; i<=3; i++) {
        var id = "stream" + i + "-yt";
        var el = document.getElementById(id);
        var player = new YT.Player(id, {
          height: '100%',
          width: '100%',
          playerVars: {
            autohide: 1,
            enablejsapi: 1,
            modestbranding: 1
          },
          videoId: (hasYT ? ytIDs[i-1]: el.dataset.yt),
          events: {
            'onReady': onPlayerReady.bind(player, i)
          }
        });
        players[id] = player;
    }
  }

function SwapStreams(i) {
     var main = streamContainer.querySelector('.main');
     var sub = streamContainer.querySelector('.sub-' + i);

    var m = players[main.id + '-yt'];
    var s = players[sub.id + '-yt'];

    main.classList.remove('main');
    main.classList.add('sub');
    main.classList.add('sub-' + i);

    sub.classList.add('main');
    sub.classList.remove('sub');
    sub.classList.remove('sub-' + i);

    s.setVolume(m.getVolume());
    m.setVolume(0);
    m.setPlaybackQuality('small');
    s.setPlaybackQuality('default');
}

stream2blocker.addEventListener('click', SwapStreams.bind(stream2blocker, 1));
stream3blocker.addEventListener('click', SwapStreams.bind(stream3blocker, 2));
//]]>
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>TI5 TI5 TI5 TI5 TI5</title>
	<style type='text/css'>
	html,body {
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden;
	}
	#streamContainer {
	display: inline;
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	}
	#streamContainer > div {
	display: inline;
	position: absolute;
	}

	.main {
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	}

	.sub {
	height: 236px;
	width: 420px;
	z-index: 2;
	opacity: 0.75;
	}

	.sub-1 {
	top: 50px;
	right: 10px;
	}

	.sub-2 {
	top: 290px;
	right: 10px;
	}

	#stream2blocker,
	#stream3blocker {
	z-index: 10;
	}
	</style>

	</head>
	<body>
	<div id="streamContainer">
	<div id="stream1" class="main">
	<div id="stream1-yt" data-yt="A6Bw9kzBoYI"></div>
	</div>
	<div id="stream2" class="sub sub-1">
	<div id="stream2-yt" data-yt="-b1fKfoQVqU"></div>
	</div>
	<div id="stream3" class="sub sub-2">
	<div id="stream3-yt" data-yt="eq-tC2rFSK0"></div>
	</div>

	<div id="stream2blocker" class="sub sub-1"></div>
	<div id="stream3blocker" class="sub sub-2"></div>
	</div>
	</div>



	<script type='text/javascript'>//<![CDATA[
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/player_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	function onPlayerReady(i, e) {
	e.target.setVolume(0);
	e.target.playVideo();
	if(e.target.getIframe().parentNode.classList.contains('sub'))
	e.target.setPlaybackQuality('small');
	}

	var res = location.href.split('?');
	hasYT = (res[1]);

	if(hasYT)
	ytIDs = res[1].split(',');
	var players = {}
	function onYouTubePlayerAPIReady() {
	for(var i=1; i<=3; i++) {
	var id = "stream" + i + "-yt";
	var el = document.getElementById(id);
	var player = new YT.Player(id, {
	height: '100%',
	width: '100%',
	playerVars: {
	autohide: 1,
	enablejsapi: 1,
	modestbranding: 1
	},
	videoId: (hasYT ? ytIDs[i-1]: el.dataset.yt),
	events: {
	'onReady': onPlayerReady.bind(player, i)
	}
	});
	players[id] = player;
	}
	}

	function SwapStreams(i) {
	var main = streamContainer.querySelector('.main');
	var sub = streamContainer.querySelector('.sub-' + i);

	var m = players[main.id + '-yt'];
	var s = players[sub.id + '-yt'];

	main.classList.remove('main');
	main.classList.add('sub');
	main.classList.add('sub-' + i);

	sub.classList.add('main');
	sub.classList.remove('sub');
	sub.classList.remove('sub-' + i);

	s.setVolume(m.getVolume());
	m.setVolume(0);
	m.setPlaybackQuality('small');
	s.setPlaybackQuality('default');
	}

	stream2blocker.addEventListener('click', SwapStreams.bind(stream2blocker, 1));
	stream3blocker.addEventListener('click', SwapStreams.bind(stream3blocker, 2));
	//]]>
	</script>
	</body>
	</html>