Ultimate HTML5 Background Video

Responsive HTML5 Background Video with GIF fallback for iOS

by Pete Fecteau

HTML

<div id="wrapper">
  <div class="vidly">
    <video width="400" autoplay loop>
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
    <div class="hero">
      <h1>Publicly Broadcast</h1>
      <h2>Political & Social Dissent</h2>
      <p>This message has been prepared for you by the psychically arousing people at Buttonpresser. If you experience prolonged stimulation please consult a doctor.</p>
  </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker|Open+Sans);
html, body {margin:0;padding:0;}
#wrapper {
  font-family: 'Open Sans', sans-serif;
}
#wrapper .vidly {
  position: relative;
  padding-bottom: 56.21%;
  height: 0;
  overflow: hidden;
}
#wrapper .vidly video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#wrapper .vidly .hero {
  position: relative;
  top: 0;
  left: 0;
  padding: 40px;
  z-index:1;
  text-align: center;
}
#wrapper .vidly .hero h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 42px;
  line-height:42px;
  margin:0;
  padding:0;
}
#wrapper .vidly .hero {color: #fff;}
#wrapper .vidly .hero h2 {
  font-family: 'Permanent Marker', cursive;
  font-size: 32px;
  line-height:32px;
  margin:0 0 40px;
  padding:0;
}
#wrapper .vidly .hero p {
  font-size: 14px;
  line-height: 161%;
  max-width: 630px;
  min-width: 375px;
}

JavaScript

$( document ).ready(function() {
  var deviceWidth = $( window ).width();
  var deviceHeight = $( window ).height();
  console.log( deviceWidth );    
});

var vidWidth = $('.vidly video').attr('width'),
    vidHeight = $('.vidly video').attr('height'),
    decimal = (((vidHeight/vidWidth).toFixed(4))*100).toFixed(2),
    percent = decimal + '%';
$('.vidly').css({paddingBottom:percent});