Skip to content

Instantly share code, notes, and snippets.

@Tom32i
Last active March 10, 2016 18:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tom32i/c4796999477470c4faa1 to your computer and use it in GitHub Desktop.
Save Tom32i/c4796999477470c4faa1 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Okeanos Explorer 2016 Livestream</title>
<style>
body, * {
margin: 0;
padding: 0;
font-size: 0;
background: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<iframe width="1120" height="630" src="https://www.youtube.com/embed/6aXR-SL5L2o?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe width="1120" height="630" src="https://www.youtube.com/embed/DRA8IzhC8vM?autoplay=1" frameborder="0" allowfullscreen></iframe>
<script>
var ratio = 560 / 530
videos = document.getElementsByTagName('iframe'),
total = videos.length,
horizontal = true;
function resize ()
{
console.log(window.innerWidth, window.innerHeight);
var width = Math.floor(window.innerWidth / (horizontal ? 2 : 1)),
height = Math.floor(window.innerHeight / (horizontal ? 1 : 2));
for (var i = 0; i < total; i++) {
display(videos[i], width, height);
}
}
function display (video, width, height)
{
video.width = width;
video.height = height;
video.style.width = width + 'px';
video.style.height = height + 'px';
console.log(width, height);
}
window.addEventListener('resize', resize);
resize();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment