How To Make Background Video Html

Yous've seen them everywhere: large, full-width background videos on websites. Unremarkably located at the top of a page, they bring life and motility to what might otherwise be some other boring value proposition. At that place is no denying that a well washed background video can really set the tone of your website and add affect to your page and message. The issue is that these videos can be large and degrade the user experience if not optimized correctly.

In this post I'll cover the chief points yous need to know when creating a background video for a website.

Keep Background Videos Brusk

No i is going to sit and watch a threescore second background video. Do not flatter yourself. Your team eating lunch, your office, people putting sticky notes hither and thither - news flash: your user has probably already read your value proposition and either desired to go on scrolling, clicked away, or closed the tab.

Think, this is a background video, non a product or instructional video. In that location is no reason for video to be longer than 15 or 20 seconds. A smaller elapsing prune keeps the size reasonable, and can begin streaming quicker. If you need to show 60 seconds worth of content, mayhap you need an actual promotional or marketing video!

Reduce Motion and Speed

Y'all exercise not want to requite your visitor a sense of vertigo when they visit your site if there is fast motion. Also, at that place may exist text or a call to activity link over the video, and a lot of motion volition make that harder to encounter and collaborate with.

Optimize the Video File

There are three main things to do here:

1) Keep Dimensions Standard HD

Your video can be Hard disk drive (loftier definition), which is 720p video (1280 ten 720 pixels). At that place actually is no reason to consign a background video in Full Hd (1920 10 1080) - that's simply overkill and wastes bandwidth.

2) Keep The Frame Rate Low

A frame rate of 24 or 25 frames per second is acceptable. We're not producing a Hollywood movie, after all! Fewer frames means a smaller file size.

3) Remove the Audio Channel

Background videos won't autoplay with sound anyway, so an sound aqueduct is not necessary. When exporting your video, brand sure to omit the audio channel.

As far as how to optimize the video, we use a complimentary Mac app chosen Handbrake, which has been effectually for many years and has a number of presets and settings that requite you lot lots of command. If yous're more technical, you can optimize videos using the command line using ffmpeg. There are even online services that volition optimize video. A google search volition reveal dozens.

Optimize the Affiche Image

The poster prototype is the epitome that is displayed while a video is loading. It'south commonly the aforementioned every bit the first frame of the video, so the video loading looks seamless. Don't forget this image should be optimized like any other paradigm.

Serve Multiple Video Formats

If you want to cover your bases with diverse browsers, export both mp4 and webm format videos. The compressed file sizes of these videos will probably be very similar. Hither is a uncomplicated instance of how the code might look on a webpage:

            <video poster="/bg-video-posterimage.jpg">   <source src="/bg-video.webm" blazon="video/webm">   <source src="/bg-video.mp4" type="video/mp4"> </video>

We provide multiple formats because non all browsers support the aforementioned video formats. Using "source" elements, the browser volition use the first 1 information technology understands (e.chiliad., Safari volition apply mp4 and Chrome will use webm).

Now that the video is ready to display on your page, consider the following points:

Provide Contrast

If yous have text or other chemical element over your video, make certain in that location is enough dissimilarity to read it. Often, a semi-transparent color overlay will exist placed over the video to aid the text higher up information technology stand out. An overlay too helps hide small artifacts that may exist in the video later on compression.

Add a Intermission Push

Some users simply don't want to be bothered with bells and whistles (or move) on a website, and that's fine. For background videos, you tin add a pause button with JavaScript. Another affair to consider is that a video prepare to loop will keep looping as long as that user has a tab open, so once more, JavaScript tin can be used to pause the video later a certain amount of time.

Example Groundwork Video Optimization: Tesla

As of this writing, Tesla has a background video on their Model Y page: https://www.tesla.com/modely

That video looks swell, and shows their product in action, like a commercial. A few things about that video:

Information technology's only 14 seconds long
At that place is no audio (though this video does have stereo audio channels with no sound. Mayhap removing those could reduce file size further)
The video loops
There are video controls if you hover over the video, allowing the user to suspension it
There is sufficient contrast to read the text above the video
It is in mp4 format (they aren't even serving webm as an culling source on desktop)
The dimensions are 1254 × 1080 (odd dimensions, but closer to square to fit their folio design)
It is only 2.9MB in size
Frame Rate is 25 FPS
Bit rate is 1.68 Mbit/s
They serve an alternate webm version on mobile

Overall, this is a solid case of groundwork video optimization.

Last Optimization: Mobile

Depending on the projection, there may be a need to testify a smaller video on mobile, or no video at all (using an prototype instead) to save your users' bandwidth. We pay a lot of attention to Google Folio Speed Insights and Cadre Web Vitals, which I talked almost in my Improving Google Page Experience With Core Web Vitals post. This is critical if you want your site to render pages quickly.

Looking at Web Vitals on projects with background videos that are supposed to display an epitome on mobile, we noticed that fifty-fifty though the video was not showing on mobile (because nosotros were hiding information technology with CSS media queries), it was still continuing to load in the background, as was the poster prototype for the video. Nosotros didn't want any part of the video element to load (we wanted to show a completely separate mobile image that nosotros had more control over with CSS than the affiche paradigm would have allowed) so we had to accept ane more than step. This was easier said than washed - in searching around the web, in that location wasn't much info on lazyloading a video affiche paradigm.

We needed the help of some JavaScript to achieve this. We were already using Lazy Sizes to lazyload images (pregnant, it keeps the images from loading on the page until the user has scrolled to the image, allowing pages to load faster). We realized there is a Lazy Sizes plugin/extension called unveilhooks that extends lazySizes to additionally lazyload things other than images, including scripts/widgets, background images, styles and video/audio elements.

Here'due south an case of how we implemented that on a video element. The example code is in Twig and the site in question was congenital on Arts and crafts CMS, though this method would work with other templating languages and other systems, too:

            {# Note the 'information-' attributes and blank autoplay for lazysizes unveilhooks plugin, and then none of this loads on mobile. #} <video preload="none" data-autoplay="" loop="loop" muted="muted" volume="0" class="lazyload" data-affiche="{{ bgVidPoster.url }}">   {% for video in bgVideos %}     <source src="{{ video.url }}" type="video/{{ video.extension }}">   {% endfor %} </video>

If this video element is not visible on the page (i.eastward. we're viewing the folio on mobile) unveilhooks will get out this solitary, and it's equally if at that place is no video tag on the page. If the video is visible on the page (i.e. desktop), unveilhooks will set autoplay and permit the poster image to load besides.

Conclusion

There aren't besides many steps needed to make sure that a background video is well optimized. In the commencement, y'all might get tripped upwardly in the optimization stage with frame rates and output dimensions, only once you've optimized a few videos, it becomes pretty easy to know if you've struck a good balance betwixt file size and video quality.

Hopefully you tin can utilise this article as a reference if someone needs to create a video and is asking questions similar "how long should the animation run before it loops? Are at that place technical parameters the animator should know in order to make the file equally 'light' as possible to reduce load time? What file format is preferred?" - which are exactly the types of questions that prompted this post.

Skillful luck with your background videos!