Video Background used css
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
.gitattributes
README.md
index.html

README.md

Video Background

Making video as a page background

Installation

HTML

Insert into <body>:

<video autoplay loop poster="images/moon.jpg" id="moon">
<source src="images/moon.webm" type="video/webm">
<source src="images/moon.mp4" type="video/mp4">
</video>

CSS

Add a short css into<body>:

<style>
@media screen and (max-width: 500px) {
div{width:70%;}
}
@media all and (max-device-width: 800px) {
body { background: url("images/moon.jpg") #000 no-repeat center center fixed; background-size: cover; }
#bgvid, #polina button { display: none; }
div{width:70%;}
}
</style>

Then link a css/videobg.css file to make full-screen processing.

Demo

Demo Page
Moon

Legal

Copyright (c) 2016: windmill0503 Show it on Code Studio this article