Skip to content

Instantly share code, notes, and snippets.

@gplanchat

gplanchat/video-autoplay.html

Created March 26, 2016 20:43
Show Gist options
  • Save gplanchat/3da29e50e8911f7430e9 to your computer and use it in GitHub Desktop.
Save gplanchat/3da29e50e8911f7430e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
video-autoplay.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="bower_components/material-design-lite/material.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
* {
font-family: sans-serif, 'Roboto';
}
body {
margin: 0;
background: #000;
}
.vid-layout-transparent .mdl-layout__header,
.vid-layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
.vid-jumbotron {
color: white;
width: 50%;
margin: calc(50vh - 64px) auto;
text-align: center;
}
.vid-jumbotron h1 {
font-size: 128px;
margin-bottom: 0;
}
.vid-jumbotron .subtitle {
font-size: 32px;
margin-top: 0;
}
.vid-jumbotron video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('assets/video/video-background.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
@media screen and (max-device-width: 800px) {
.vid-jumbotron {
background: url('assets/video/video-background.jpg') #000 no-repeat center center fixed;
}
.vid-jumbotron video {
display: none;
}
}
</style>
</head>
<body>
<div class="vid-layout-transparent mdl-layout mdl-js-layout">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="vid-jumbotron">
<video autoplay loop muted preload="auto" poster="assets/video/video-background.jpg">
<source src="assets/video/video-hd.mp4" type="video/mp4">
<source src="assets/video/video-sd.mp4" type="video/mp4">
</video>
<h1>Title</h1>
<p class="subtitle">Subtitle</p>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</section>
<section class="vid-placeholder">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</section>
</main>
</div>
<script src="bower_components/material-design-lite/material.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment