Creating a video background
- Connect a site in Dreamweaver and create a file called html5Video.html and insert the .mp4 video file into the same folder
- Now copy/paste this code into the head tag <head>:
<head>
<style type="text/css">
#background { /* Set rules to fill background */ min-height: 100%; /* Set up proportionate scaling */
width: 100%; height: auto; /* Set up positioning */
position: fixed; top: 0; left: 0; background-color: #09F; }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
#content { background-color: #FFF; width: 900px; z-index: 1; position: absolute; left: -450px; top: 10px; min-height: 800px; margin-left: 50%; }
</style>
</head>
- Now paste this code inside the body tags:
<body>
<div id="background">
<video autoplay muted width="100%" height="100%" loop="loop">
<source src="linesBG.mp4" type="video/mp4"></video>
</div>
<div id="content">Content for id "content" Goes Here</div>
</body>
- Make sure the video file name the name of your file
- Questions:
- Why is there a min-height for the background?
- A fixed position?
- A # pound sign for background and content but not body
- A margin left 50% and a position left -450