Skip to content

Instantly share code, notes, and snippets.

@kn0ckkn0ck1

kn0ckkn0ck1/index.html

Created October 18, 2018 13:01
Show Gist options
  • Save kn0ckkn0ck1/723321ad399de9fdc79b036a88dcffd7 to your computer and use it in GitHub Desktop.
Save kn0ckkn0ck1/723321ad399de9fdc79b036a88dcffd7 to your computer and use it in GitHub Desktop.
Download ZIP
Full screen video, example from demosthene.info by // source https://jsbin.com/zomedag
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full screen video, example from demosthene.info by </title>
<style id="jsbin-css">
html, body{
height: 100%;
color : white
}
header{
height: 100%;
background-image: url('http://dupontcours.free.fr/IMG/dots.png'), url('#');
background-repeat: repeat, no-repeat;
background-size: auto, cover;
background-position: center center, top left;
font-family: sans-serif;
color: #051a00;
}
header video {
position:fixed;
top:50%;left:50%;min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<header>
<video autoplay loop="" poster="https://mainline.i3s.unice.fr/mooc/polina.jpg" id="bgvid">
<source src="https://mainline.i3s.unice.fr/mooc/polina.webm" type="video/webm">
<source src="https://mainline.i3s.unice.fr/mooc/polina.mp4" type="video/mp4">
</video>
</header>
<section>
<h1>http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video</h1>
</section>
<script id="jsbin-source-css" type="text/css">html, body{
height: 100%;
color : white
}
header{
height: 100%;
background-image: url('http://dupontcours.free.fr/IMG/dots.png'), url('#');
background-repeat: repeat, no-repeat;
background-size: auto, cover;
background-position: center center, top left;
font-family: sans-serif;
color: #051a00;
}
header video {
position:fixed;
top:50%;left:50%;min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);
}</script>
</body>
</html>
Raw
jsbin.zomedag.css
html, body{
height: 100%;
color : white
}
header{
height: 100%;
background-image: url('http://dupontcours.free.fr/IMG/dots.png'), url('#');
background-repeat: repeat, no-repeat;
background-size: auto, cover;
background-position: center center, top left;
font-family: sans-serif;
color: #051a00;
}
header video {
position:fixed;
top:50%;left:50%;min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment