Ads 468x60px

Shoemoney - Skills To Pay The Bills

Shoemoney - Skills To Pay The Bills

Link to ShoeMoney

How to do html 5 background video for websites and encoding rate

Posted: 02 Mar 2016 07:14 AM PST

With my girls all into showing dogs,  in particular Kerry Blue Terriers,  in true ShoeMoney style I acquired the domain kerryblueterriers.com. BTW exact match dog breed domains are expensive as shit.  This was the 2nd most I have ever paid for a domain name.

They are 8 and 10 years old and don’t have any content but now plan to do posts, review products, interview other dog owners, etc,etc.

So I wanted to put a coming soon page up and I also wanted to figure out how to do html5 background video.

All most all of the Google results were either about reviewing sites with it OR doing it for blocks of css.

To my surprise its SUPER quick to load if you encode it right.

You can use pretty much any video editor to set the bit rate properly.

I recommend exporting your video in 720p (1280×720) at 700kb.  On that page I did a 30 second video and its less than 10mb.  Its mp4 with h.264 encoding so it streams.

I also did higher bit rates and 1080p video and I honestly couldn’t tell the difference.

I did an overlay in the video editor but you can use standard css to overlay it with whatever color you want in whatever transparent level you want.

Here is the code I used:

html:

      <!DOCTYPE html>  <html >    <head>      <meta charset="UTF-8">      <title>Juliet & Joslyn's Kerry Blue Terriers</title>                <link rel="stylesheet" href="css/style.css">                        </head>      <body>        <html lang="en">    <head>      <meta charset="utf-8">      <title>Juliet & Joslyn's Kerry Blue Terriers</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">      </head>    <body>      <video autoplay loop muted poster="pic.png" id="background">      <source src="girls.mp4" type="video/mp4">  </video>    <div class="container">      <div class="row">        <div class="col-md-12">          <center><h1>Juliet & Joslyn's Kerry Blue Terriers</h1><BR><BR><BR><BR>  		<h1> Coming soon - Grooming, Showing, and All things from the pro's.</h1>         </div>      </div>    </div>    </body>  </html>               </body>  </html>

 

CSS:

    #background {      position: fixed;      top: 50%;      left: 50%;      min-width: 100%;      min-height: 100%;      width: auto;      height: auto;      z-index: -100;      -webkit-transform: translateX(-50%) translateY(-50%);      transform: translateX(-50%) translateY(-50%);      background: url(polina.jpg) no-repeat;      background-size: cover;  }  .container h1 {    color: white;  font-size:45px;    }

To see my example look at http://kerryblueterriers.com.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)