You are here

Implementing a video header on your website

(NOTE: I don't have the videos running currently (you can just see the still images), because I'm still messing a bit with the video editing piece.  I've got them on my local test site, but am not ready to roll out quite yet...  You'll just have to imagine them or implement yourself with the guide below to see the full effect!  They'll be up soon.)

Inspiration

I got the inspiration to create a video header for this blog of mine from the very beautiful, very striking Marketo 2014 Summit website: http://summit.marketo.com/2014/

Video editing and formats

I won't go into details here, because I'm not a video editing pro, but I shot some relevant video with my iPhone (I knew I wanted to result to be grainy, low-fi and cool, so the quality didn't have to be amazing), edited it with Mac's iMovie application, and then converted the resulting .mov files using the free online converter http://video.online-convert.com/convert-to-mp4.

Formats

The HTML5 <video> tag currently allows three video formats: MP4, WebM, and Ogg, each of which are supported by a different combination of today's most common browsers.  In addition to the three formats, you can (and should) also specify a still image option, which will be displayed if your web page is viewed with a browser that cannot play the video (or on mobile devices which do not autoloop the video by default).

Read more about the HTML5 <video> tag on w3schools.com: http://www.w3schools.com/html/html5_video.asp.

Video header HTML

After saving my videos into all three appropriate formats, I changed my website's header HTML code to the following:

<div id="video-header">
	<video id="video1" poster="/sites/all/themes/custom/boriana2/videos/Video_header_still1.png" loop="" autoplay="">
	<source type="video/mp4" src="/sites/all/themes/custom/boriana2/videos/Video_header1.mp4"></source>
	<source type="video/ogg" src="/sites/all/themes/custom/boriana2/videos/Video_header1.ogv"></source>
	<source type="video/webm" src="/sites/all/themes/custom/boriana2/videos/Video_header1.webm"></source>
	<img src="/sites/all/themes/custom/boriana2/videos/Video_header_still1.png">
	</video>

	<video id="video2" poster="/sites/all/themes/custom/boriana2/videos/Video_header_still2.png" loop="" autoplay="">
	<source type="video/mp4" src="/sites/all/themes/custom/boriana2/videos/Video_header2.mp4"></source>
	<source type="video/ogg" src="/sites/all/themes/custom/boriana2/videos/Video_header2.ogg"></source>
	<source type="video/webm" src="/sites/all/themes/custom/boriana2/videos/Video_header2.webm"></source>
	<img src="/sites/all/themes/custom/boriana2/videos/Video_header_still2.png">
	</video>

	<video id="video3" poster="/sites/all/themes/custom/boriana2/videos/Video_header_still3.png" loop="" autoplay="" >
	<source type="video/mp4" src="/sites/all/themes/custom/boriana2/videos/Video_header3.mp4"></source>
	<source type="video/ogg" src="/sites/all/themes/custom/boriana2/videos/Video_header3.ogg"></source>
	<source type="video/webm" src="/sites/all/themes/custom/boriana2/videos/Video_header3.webm"></source>
	<img src="/sites/all/themes/custom/boriana2/videos/Video_header_still3.png">
	</video>
</div>

For each of the three videos, I provided all three formats, plus the still image that will be shown if the video is not played.

Each of the videos (and even the corresponding still images) is loaded into a newly created /videos folder within my custom Drupal theme.

Final touches: responsive SASS/CSS Styling

The custom Drupal theme I'm currently using has responsive breakpoints, so I wanted to take advantage and make the number of videos shown correspond to the width of the device screen.  The rules below show only the first video if you're on a small smartphone-type device, two videos if you're in a medium-sized (tablet) screen, and all three videos if you are on a wide-screen or desktop environment.

You'll notice the SASS-specific use of variables and nesting, but it should be able to convert this to CSS-compatible rules if that's what you need.  This is just a portion of the styling I did for the header, but it should get you going.

header.l-header {

  #video-header{
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
    height: 200px;
    overflow: hidden;
    @include at-breakpoint($tablet-breakpoint) {
      height: 210px; 
    }
    @include at-breakpoint($desk-breakpoint) {
      height: 220px; 
    }    
    
    video#video1 {
      float: left;
      width: 100%;  /* Only this video shows in mobile environments */
      @include at-breakpoint($tablet-breakpoint) {
        /* Two videos display in desktop environments */
        width: 50%;
      }
      @include at-breakpoint($desk-breakpoint) {
        /* Three videos display in desktop environments */
        width: 33%;
      }      
    }
    video#video2 {
      float: left;
      display: none;  /* This video does not display in mobile environments (only the first one does) */
      @include at-breakpoint($tablet-breakpoint) {
        display: block;
        width: 50%;
      }
      @include at-breakpoint($desk-breakpoint) {
        display: block;
        width: 33%;
      }      

    }
    video#video3 {
      float: left;
      display: none;  /* This video does not display in mobile environments (only the first one does) */
      @include at-breakpoint($tablet-breakpoint) {
        display: none;  /* This video does not display in tablet environments (only the first two do) */
      }
      @include at-breakpoint($desk-breakpoint) {
        display: block;
        width: 33%;
      }

    }

 

Results

Here are the before and after screenshots!  A big change, right?  The site looked very clean and simple (and a little childish) before and much busier, but more modern in the after.  What are your thoughts on the new look?

Before

After

Video duplication horizontally

What I think I'll end up doing in the long-term is mirroring just one of the videos on all three video sections (for desktop viewing), because I really like the look of that (less busy than separate videos, and very, very cool).  Of course, only two will show on tablets and just the one for smartphones.  Since I'm always playing around with my blog theme though, who knows how long this look will last... ;-)

Video on mobile devices

Thankfully, when viewed on a mobile device, the autoplay is disabled by default, which is great.  If you don't know what a person's connectivity is, you don't want to be forcing a video download and play...  This is what the blog looks like on an iPhone currently (remember, it's responsive, so it's only showing the first video). 

Share

Comments

Hello,
I have a mp4 video in a folder on partition E:/ of my laptop hard.
How can I place it(address to that folder on E:/) as a header on my web pages?

Thanks,

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.