🦸 Hero section: Shine bright like a 💎 with tailored video backgrounds

“With great landing page, comes great hero section.” – Spiderman

I know, you're thinking "Spiderman didn't say that, man".
Who cares? I don't.
Who googles quotes anyway? I do.
And I didn't find a suitable quote to mix the topics of hero sections and superheroes.
So I made one up. Guilty as charged, my honor.
In my defense, I am not the first person on the internet to make up quotes.
In fact, there's whole scene around this behaviour.
Crazy, right?

Now that we've got that out of the way, let's spice up that hero section on your carrd landing page with a juicy and easy to make background video.

But first:

🤷 1. What are you actually talking about? (aka What is a 'hero section')

If you're expecting a full blown UI and design analysis with magical grids and precise positioning on your figma x- & y- achses stop reading now.
I have to disappoint you once more.

I'm an indie hacker.

My main goal is to get things going fast and easy.
The attentive reader might even go so far as to say "Look mom! He posted in a no code group, so technically he's even to lazy to code".
Double the charge, my honor!

So, in case you've never heard of a hero section here's the deal from my lazy minded indie hacker perspective:

It's that very big area at the top your landing page. It usually has big visuals like big letters and / or big images or big videos (yep, our topic).

Therefore it is the first thing a person looks on at your landing page.

That's why it's crucial to make that area special, distinguishable and shine.
A website on the internet even goes so far to say that embedding a hero background video can help boost your conversion rates by 80%.
That's a double digit performance uplift straight in your face!

And as we've already established that nobody just makes stuff up.

Especially not on the internet, right?

So, let's have a look at how some folks are going about their hero sections with video backgrounds with some

Examples of Videos in Hero Sections

Go big! Lifestyle - Nomadlist

Strong big emotional scenes on nomadlist.com transport the feeling a (potential) digital nomad wants.

The decent way. Investment firm- Bienville Capital

Very decent looping video on bienvillecapital.com. Decency is most certainly something you expect from an investment firm.

"I do'nt have a film degree"
"I've never touched a videocamera"
"How do I even write a video script for the internet?"
– You

Stop lying to yourself.
You don't need any of the above.
As an indie hacker you will always find a shortcut.
And here is yours in 3 simple and short steps:

1. Get free stock video

To create that background video the first thing you need is -obviously- video material.

There are many websites to get free stock videos on the internet.
You can even find them by what you do most of the time if you need an answer to a question - googling.

To speed things up I've done the work for you.

Here are

6 free stock video sites

• https://videos.pexels.com/ - Wide variety, no 4k Videos, selection of "green screen" videos
• https://pixabay.com - Wide variety of videos
• https://dareful.com/ - 4k stock video
• https://www.videvo.net/ - Free stock video & motion graphics
• https://www.lifeofvids.com/ - Free looping videos, nice for loops without editing
• https://www.splitshire.com/category/video/ - Mainly nature stock video

"Mooooooom. He didn't include my favorite site superduperfreestockvideos.com 😭"

I know, there are many, many more websites.

And if you reach the last page of your google search you will find them all.
But, for the sake of saving you time I have included the sites that I think can help you most to achieve your goal.
Because these are the sites I have used and think are very useful.

From all the sites I would like to highlight two.

1] Pexels

In my opinion you do not need 4k video quality for a landing page background.

To keep loading times short and squeeze out a bit of performance it even makes sense to keep the video size rather low. If you are planning to create a full screen video for the user to open it obviously makes sense get the best quality possible.

But for this article I am showing you how to keep things rather simple.
So, it's just a video background on todays' menu dear user.

That also means not worrying about your computer ram exploding because you are trying to render a 100 GB, 4k, HQ ultra video just showing images of smiling faces (more on the faces in a few seconds).

2] lifeofvids.

"Everything has an end only the sausage has two" - German Idiom

What do sausages and and video backgrounds in hero sections have in common?

Both look good without an end.
On the site lifeofvids you can find nice looping videos.
You can even add them without further editing.
If you really are in a hurry this solution is fast, simple and easy.

Now it's your turn.
Yes my friend you will not learn by reading. You will have to start doing.

Like in, literally now.
Come on.
Search for video material suitable to your landing page.
Keep this article open.
Press Ctrl. T (or open new tab for you mobile users. But, are you really working on a smartphone?).
And start searching.
It's ok to just start by searching the topic you are addressing on your website.
Pro Tip: Be sure to include humans.
And faces.
In fact, it's really important to have faces in your videos.
I'll wait for you to download your videos.

....

...

..

.

Done?

Good.
Now that you've downloaded the video material it's time to put that material together.

How?

🧙 2. Use free video editing

Generally you have two options when it comes to video editing.

1. Online video editing.
2. Offline video editing.

(ok, ok, not editing might also be option zero )

To be honest in my opinion you will have to try around a bit and find out what suits your needs best.

You can try web based video editors like one of this small list:

Free online video editors:

• moviemakeronline.com simple, clean video editor
• clideo.com more features, with watermarks
• storycreator.com by @storycreator focus on story format and creators

Online video editors are good to get things going quick.
Or to use them for specific needs - like storycreator.
In my opinion an offline solution is the long term way to go.
It gives you more flexibility, e.g. you can work without an internet connection.
Trading your short term freedom for long term freedom sounds familiar to an indie hacker, or?
In addition, online video editors often have water marks and or ads during usage of the free plan.

And we know how important a distraction free environment is.

And there are many great free offline solutions too.

Here's another helpful list of

Free Offline Video Editing Software

• DaVinci Resolve
• Lightworks
• Hitfilm Express

Personally, I use DaVinci Resolve as it's free, pretty fast to understand the basic concepts and can (if you want) go really complex and create full blown HQ Video edits completely free of charge.

Now it's time for action again.

Decide to go on- or offline.
Or both ways.
But, get going.
Get an editor and start getting to know the features.

....Edit.Edit.Edit....

After some time you might want to ask the question:

"How should I arrange my scenes?"

I'm happy you asked, my friend.
We have now arrived at the last scene of your learning journey.
To tell video stories on the internet you have to

🤖 3. Worship the digital video story arc

Since many years humans love to tell stories.

And humans loved to watch and listen to these stories.

This led to all kind of ways to tell a story.

But since the rise of the internet things have changed.
Humans still like stories.
But humans don't like spending too much time on things on the internet (sound familiar 😉 ?).
Things move faster in the digital realm.
And we have to adapt to this situation.
That is why you have to start off with strong images.
All the best stuff right in the beginning.
The first seconds count.

If you want to impress your friends you can use these professional sounding words

(Image credits: https://www.clickherepublishing.com/digital-first-mindset/)

Just rememder: Start strong.

Ok, so now you've
downloaded your free stock videos,
got your editing skills ready,
have prayed to the digital video arc lords and
want to know how you can

🎬4. Get the video onto your carrd landing page

This one is really easy.

Go to New → container

And now to Video → Upload and be sure to have that Loop marked

Et Voilà - that's it!

Easy, no?

Conclusion

First of all congratulations for getting this far! (I also congratulate you article skipping hero).

You now know how important that first big section of your landing page is.

You will not always need a video background.

Topics that are emotional or products that transport a certain type of feeling or lifestyle will most definitely benefit from showing the lifestyle with a video.

You can put a video onto your landing page without spending too much time or money.

What next?

Keep learning.

No superhero is born and perfect (ok, maybe Superman).
They all have to learn and nourish their skills at the beginning.
The same applies to you.
Try things, make things, break things.

Learn & grow.

I would really like to get your opinion on the article.
Did I miss anything? Did you understand the concepts?

Just leave me a comment here or shoot me a DM on twitter

See ya!