logo-badge

Tutorial: Creating Video Row Backgrounds (Using Amazon S3)

You can make a row that looks like this in just a few minutes

Have you noticed something recently? Websites are looking more amazing than ever. One visually-awesome trend in web design is having a background row contain a looping video. A perfect combination of elements in this row is typically a big bold heading, a smaller sub-heading and a colorful button below it.

What's really amazing is that if you wanted to create something like that back-in-the-day (ok, like 6 years ago) you would have driven yourself crazy for hours figuring out the CSS / HTML 5 code for making all that happen. Not anymore.

Things Are Really Awesome Now

In 2017 things are getting a lot easier. We now have working hover boards, self driving cars (my next car is totally gonna be a Tesla Model X) and having random people deliver my groceries is now a weekly thing (I haven’t been to a grocery store in six months and I am loving it) and for us web design nerds out there - having a background row play a video is really, really simple. Like “just-a-few-clicks” simple.

PRO TIP: Don’t have a video to use as a row background? Checkout our always up to date guide to stock photos and videos.  While it's not high on that list, we really like using Coverr.com for homepage videos.

For this tutorial I'll be using this stock video named Jungle Road from Coverr.com because it kinda looks like it could be filmed in Florida!  I would give you a direct link to it, but for some reason Coverr.com doesn't give you a direct link to a video. #crappy

Row Background Options

Let's get into the technical part of actually making this happen.  As long as you’re using the best (and only) web design framework we recommend, simply edit any row by clicking the wrench icon, scroll down to the Background section and choose Video.

The end result of choosing ANY of these three Video options is the same thing - a video will play in the background of the row... but it's WHERE the video file is being played FROM that you are selecting here. See, when a website visitor visits a webpage that contains a video background, that video automatically plays in the browser without them needing to do anything. In order for a row background video to play, that video file needs to be hosted somewhere - and these are your three options:

  • Media Library
  • URL
  • YouTube or Vimeo

Where Is The Video Being Hosted?

The first and the third options are pretty much self-explanatory but let's do a quick review:

  • Media Library = you upload your video to your WordPress Media Library and play the video file from there.  The downside of this is that hosting the video file on your server will (potentially) use a lot of server space and if your site has a good amount of traffic will burn through your monthly web hosting bandwidth, that's why it's best to host the video elsewhere.... like....
  • YouTube of Vimeo = you simply paste in a YouTube/Vimeo video URL and it plays in the row background. The benefit of doing this is that you will not be storing the video file on your server (saving server space) and you will not be using any of your bandwidth to play the video to your web visitors (saving bandwidth).  However, I've found that YouTube videos don't play very smoothly, don't scale very well on smaller devices/browsers and there is a short delay when the video begins so you can see the YouTube play button for a second (which is really ugly)... if only there was another option...

Thankfully there is another option and it’s simply called URL.

As you can imagine that means you'll need to host the file somewhere on the internet and put in a URL to your MP4 video file (actually two video files, but more on that towards the end of this post). In regards to hosting a video file,  you have lots of options (like DropBox) however the one service that huge companies (and you should) use is Amazon S3.

What Is Amazon S3?

So... I am a HUGE Amazon fan.  It's kind of an addition. Seriously.

When I'm in a physical retail store and I see something cool, I whip out my phone, launch the Amazon app, scan the barcode and see if I can get it cheaper from Amazon.  Sure I look like a weirdo and I'm pissing off my local retailer, but I've saved a ton of money doing this.

Amazon (specifically with Prime) not only sends me these amazing protein chips that I love, they have also sent me two robotic vacuums, jalepeno powder, hair elastics, light bulbs, coconut oil and a lot more (that's just in the last 30 days), it also lets me stream movies and instantly download books and a lot more.  Enough with the Amazon plug...

What most people don't know is that Amazon also offers a bunch of web services that web designers/developers like us can use.  These services ares collectively known as AWS or Amazon Web Services. One of these web services that we use constantly is called Amazon S3, which is a great way to store files that you want to share with others…such as, oh, I don't know...  a video file for a row background?

How Much Is Amazon S3?

Offering a free trial of AWS is a super-smart business move on Amazon's part to get web nerds to try their services, however it's not expensive, if your using S3 mainly for website backup and to serve videos you will not be paying much at all.  In the 3 years that we've been using it (for storing website backups, storing personal photos, hosting free downloadable files, etc...) we've never been charged more than $4 USD (yes, that's right just four dollars) per month.  In fact, when we started using Amazon S3 we were paying less than a dollar a month (it's strange to get a bill from Amazon for .76).  One confusing thing is how that cost is calculated, it's a complex formula that takes into consideration how much you upload, how much you download, how much you stream, etc... but you don't really need to know the details because it's really cheap.

Setting Up Amazon S3 To Host A Video File

The first thing you need to do is to open a Free Tier Amazon Web Services account - simply click that link, click the Create A Free Account button and signin using your Amazon account.

Once setup head over to your main AWS Management Console screen and click on the S3 link which is located under Storage

In Amazon S3 your files are stored in buckets - think of buckets like folders on your desktop.  Why doesn't Amazon just call them folders?  No idea, ask Jeff Bezos.  Once you launch S3, click the blue Create Bucket button at the top (normally your buckets won’t have gigantic black bars on them, we gotta keep our client info confidential knowwhatimean?)

Now you’re gotta setup your bucket. Start by giving it a unique name, not just unique to your account but to ALL bucket names in the ENTIRE AWS universe! Why? Because Amazon says so, that’s why. 🙂

So let’s give it a unique name, I’m going to call mine wda-s3-demo

Then select a region, how do you know what region to chose? Here’s a tip: where are most of your website coming from? For the Web Designers Academy, our Google Analytics tells us that most web visitors come from states on the east coast of the United States, so I’ll chose US East (N Virginia).

For now you'll want to SKIP (just click the Next button) on the Set Properties, Set Permissions tabs and on the Review tab click the blue Create bucket button

Once the bucket is setup, you now need to upload your video file. To upload your video file (this goes for any file) to Amazon S3, click the bucket name, then click the Upload button,

Once there, click the Add files button and browse to the MP4 video file on your computer.  Once selected click the Next button a few times until you get to the Review tab, once there click the Upload button.

This will initiate the upload of your MP4 file to your Amazon S3 account!  Just hang out for a minute or two while it uploads! Yay!

But hold up partner... you are NOT done yet!  Just a few more clicks!

Once the upload is finished you should see your MP4 file in your bucket, kind of like this:

THIS IS REALLY IMPORTANT = The last step is to set the permissions on this file to Public, to do that is pretty simple.  Just click on the name of the file you just uploaded then click the blue Make public button

When you do that, a Success message will briefly appear and now all you've gotta do is to COPY the Link that appears at the bottom of the screen, it can be found here:

Now you are ready to...

Integrate Your Row Background With Your S3 Hosted Video File

We're almost done! With the public url to the video file copied, now go back to the website you are designing, edit the row settings and paste in the URL you just copied into the Video URL (MP4) box, so the end result should look something like this:

Once you do, save your changes and publish the page.  You're row should look something like this

But keep scrolling for one more step that YOU MUST DO!!

Heading Goes Here

A smaller sub heading goes here! How cool?

 

Two Final Steps (One Is Super-Duper Important)

You'll notice that there are a few more things you can customize in the video background options, these simply make your background more compatible with more devices / browsers.  Here is what they mean:

  • WEBM = While most devices and browsers are perfectly happy with the MP4 format, some are not.  So what you want to do is to convert your MP4 into a WEBM file format (just do a Google search for "convert mp4 to webm" there are a bunch of free online converters) and then repeat the Amazon S3 steps from above and paste the new URL into the Video URL (WEBM) box.  However, I need to be honest and say that I usually skip this step and have never heard a complaint from a client or website visitor.NOTE: If you download a free stock photo from Coverr.com, in the zip file you download it will contain a .webm file and a .jpg (see below)... this makes your life a lot easier!
  • Fallback Photo = Some mobile devices (like iPhones) do not play row video background, this is something Apple chose to do and there is nothing you can do about it.  Instead of showing the mobile visitor an error, or worse, a blank white section... simply take a screenshot of a visually interesting frame in your video and upload in this spot.  That screenshot will be show on devices that do not support video backgrounds.  You should DO THIS EVERY TIME YOU USE A ROW BACKGROUND!

Do Everything Way Faster

Confused? Just feeling lazy today? Don’t want to mess with row options? Don’t want to layout an entire page? We hear ya, so we put together a kit that contains some sweet professional designed layouts (that include video row backgrounds!) and tutorial videos showing you how to design amazing web pages - snag your copy of the Beaver Builder Jumpstart Kit #1 now for just $29 bucks.

May all your video row background come true my friends!

Your friend,
Ian Anderson

PS: Thanks to Steve for the great idea for this blog post!