It’s easy to create a website. You can do it with website builders from your phone, these days; or you could create a website at Websitebuilder.com in under 30 minutes. But being able to write in code allows you to include impressive elements to increase presentation, form, and function of any website. Parallax images and fullscreen videos are all the rage in web design these days, and for good reason: they have a lot of pop, keep visitor interest, and look fantastic. Many major online companies are making the transition from images to video (have you been to the Paypal website lately?) and we’re going to give you the tools to do the same.
The only tools you need are some basic CSS. And if you’re familiar with CSS, you know that CSS can easily accept a multitude of background image properties, including colors, gradients, SVG values, bitmaps… but for most beginning developers, video is new and uncharted territory.
The first thing you’ll want to do is create a video element in HTML5. In most cases, it’s recommended that the video have a few attributes: it should be on mute, it should be looped, and it should autoplay. The reason for this is that most visitors will assume the video is just an image if it doesn’t autoplay, and as we all know from browsing the web on our own, auto-start noises can be embarrassing in public places, and are distracting or irritating just as a general rule of thumb. Audio should always be an option, not a given.
Place the HTML5 video inside a container element, and take a screenshot of the first frame of the video. Crop the frame, which will be used in the poster attribute as the poster image. Not technically necessary, but considered the best practice.
Set the width and height of the video element, but take note that that is rarely (if ever) enough. Most videos record in an aspect ratio which does not match screen size! An aspect ratio of 16:9 isn’t unusual, and if kept, will give some negative space along the edges of a PC screen.
At this stage, look at the most common screen size your website will be viewed at and adjust accordingly: the video should keep its own aspect ratio, but should extend a little bit beyond the size of the largest viewing screen it will be seen on. This will reduce any negative space! Record those values in the appropriate fields, and take a look at your handiwork.
These changes usually produce another problem to deal with: that the video isn’t centered. In most cases, since it’s now stretched, that’s not a huge issue, and the uncentered aspect will be small enough that no one will notice. If it doesn’t bother you, or if non-essential parts of the video are the ones lost, you’re absolutely done!
If you need (or want) to correct this, however, the fix is pretty simple. Simply use negative margin space within the container (manually editing the video position) to help center or adjust it until it’s in the right spot. You can also edit the viewport again, stretching it taller or wider so that it better mimics the browser aspect ratio.
One special consideration is important particularly for mobile-responsive websites… or really, any website which will be viewable on mobile. Most mobile devices won’t autoplay videos inserted with HTML5, and will instead display a ‘play’ button. Here’s where that poster attribute image comes in: just hide the video for mobile display, and instead have the image clipped from the first frame appear.
This has dozens of applications, and it should be noted that video backgrounds are a great way to draw visitor attention. In some cases, it can even increase the amount of time visitors spend on-site, which serves both to reduce drop rates and increase conversions. According to digitalmarketers.com, split-testing this function increased conversions by as much as 12 percent.
But it also just looks cool, and when paired with high-resolution video pertinent to the website subject, makes for a top-tier look and feel. Pair it with bold non-serifed headers layered over the video and great calls to action for maximum effect.
