Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Full-Size, Looping Background Video with YouTube Video
<style>
.bg-video {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.bg-video #player {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -2;
}
.bg-video .overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
h1 {
color: white;
text-align: center;
margin-top: 35vh;
font-size: 64px;
text-shadow: 1px 1px 3px black;
}
</style>
<div class="bg-video">
<div class="overlay"></div>
<div id="player"></div>
</div>
<h1>Hello World</h1>
<script>
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'LS-ErOKpO4E',
playerVars: {
autoplay: 1,
controls: 0,
modestbranding: 1,
loop: 1,
playlist: 'kNizPk7xBbs'
}
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment