Video Background Tutorial Plus Youtube Embed
Learn to use video as HTML content backgrounds instead of using still image backgrounds. We will also demonstrate how to use Youtube videos as the video background to loop under your page content. It is simple to layer or stack HTML elements so we can apply CSS settings to make video play directly under HTML content.
Example 1: Using video that streams directly from your own web site server.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page With Video Background</title>
<style>
body{ margin:0px; background:#000; }
#bg_container{ height:500px; overflow:hidden; }
#bg{ width:100%; }
#content{ position:absolute; top:0px; padding:30px; color:#FFF; text-shadow:#000 2px 2px; }
</style>
</head>
<body>
<div id="bg_container">
<video id="bg" src="video/page_bg.mp4" autoplay="true" loop="true" muted="true"></video>
</div>
<div id="content">
<h1>Web page with HD looping video background</h1>
<h2>Using CSS the video is simply placed underneath our HTML content</h2>
</div>
</body>
</html>
Example 2: Using Youtube video streams as content background.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page With Youtube Video Background</title>
<style>
body{ margin:0px; background:#000; }
#bg_container{ height:500px; overflow:hidden; }
#bg{ width:100%; height:900px; }
#content{ position:absolute; top:0px; padding:30px; color:#FFF; text-shadow:#000 2px 2px; }
</style>
</head>
<body>
<div id="bg_container">
<iframe id="bg" src="//www.youtube.com/embed/LuD3_umIxgw?autoplay=1&controls=0&loop=1&showinfo=0&modestbranding=1&disablekb=1&enablejsapi=1&playlist=PLAYLIST_ID_HERE" frameborder="0"></iframe>
</div>
<div id="content">
<h1>Web page with HD looping video background</h1>
<h2>Using CSS the video is simply placed underneath our HTML content</h2>
</div>
</body>
</html>