Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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&amp;controls=0&amp;loop=1&amp;showinfo=0&amp;modestbranding=1&amp;disablekb=1&amp;enablejsapi=1&amp;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>
thumb

CSS Videos

Background and Overlay Effects

Multiple Background Images TutorialTheater Mode Overlay Tutorial Javascript Light Switch Toggle DarkFixed Header and Footer Div Layout TutorialLinear Gradient Background TutorialRadial Gradient Background TutorialVideo Background Tutorial Plus Youtube Embed