HTML5 Video

HTML5-Video.markdown

HTML5 Video

Example of HTML5 Video

A Pen by Adam on CodePen.

License.

index.html

<video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
</video>
  
  <div class="overlay">
    <h1>HTML5 Video</h1>
    <p>HTML5 Video overlay example, quite popular with a lot of creative sites.</p>
    <p>View <a target="_BLANK" href="http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video">Original</a> demo for best experience.</p>
    <p><a target="_BLANK" href="http://codepen.io/doddsy105/full/rtcbE/">Fullscreen</a></p>
   
    
  </div>

script.js

// Orange Otter Web Design & Build
// www.orange-otter.com

style.css

body {
  font-family: 'Arimo', sans-serif;
}

video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}

/*****************************/

.overlay {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: rgba(0,0,0,0.3);
  display: block;
  position: absolute;
  top: 10%;
  left: 50%;
}

.overlay h1 {
  text-align: center;
  padding-top: 100px;
  color: #fff;
  font-family: inherit;
}

.overlay p{
  text-align: center;
  width: 80%;
  margin: 0 auto;
  color: #fff;
  font-family: inherit;
  margin-bottom: 20px;
}

.overlay a {
  color: #fff;
}

.orange {
  text-decoration: none;
}
 p a.orange {
   color: #f27950;
 }