Skip to content

Instantly share code, notes, and snippets.

@Gegam
Created November 22, 2016 15:45
Show Gist options
  • Select an option

  • Save Gegam/177a354db46f32ce08c6597898c2c413 to your computer and use it in GitHub Desktop.

Select an option

Save Gegam/177a354db46f32ce08c6597898c2c413 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
.video-bcg {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('bg_greeting.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.greeting-bg {
position: relative;
text-align: center;
background-size: cover;
width: 100%;
height: 420px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="greeting-bg">
<video class="video-bcg" poster="bg_greeting.jpg" playsinline autoplay muted loop>
<source src="lamoda_compressed.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment