🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Cool examples of full screen video backgrounds on websites
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Hi there, I’m Dan. In this course we’ll learn how to create and edit a video for our website. Then we’ll go and build the site from scratch. It looks fancy, but it’s not particularly hard.
Check out the live example here!
I built this course for beginners. You do not need to know how to code or how to edit video to take this class. We’ll start with the super basics. This could totally be your very first website, wouldn’t starting with a video background be a super cool first project?
We’ll go through the full process. I’ll show you where to find some video, I’ll show you how to edit it in Premiere Pro. We’ll do cool video effects like blurs, tints and transitions. I’ll show you how to export the video so we can get the file size super small. Once we’ve created our video we’ll build a basic website together and make our video all cool and full screen.
We’ll also create a second option where the video peeks in through a specific box.
In this course I’ve got exercise files so you can play along. I’ll also save my files as I go through each video so you can compare yours to mine - handy if something goes wrong. We’ll be using Dreamweaver & Premiere Pro but 95% of this can be done in generic web & video tools.
Remember: I’m happy to help & I’m pretty handy with replying. Also - there is a handy cheat sheet you can print out, plus there are teacher resources if you need them.
The best thing - is that it’s not that hard. But super awesome video background will impress the heck out of your clients.
What are the requirements?
You'll need a copy of Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe .
It will be handy if you know some basic HTML before this course. It’s focused more on video backgrounds and not the entire web design process.
What am I going to get from this course?
15 lectures 2 Hours 18 minutes of content!
You'll learn to build a website with a video background.
Pros, cons & cool examples of video backgrounds.
How to edit your video in Premiere Pro.
Where to get video.
Basic editing, adding texture, fading, texturing, blurring, coloring.
Premiere or After Effects? Both?
What size should it be. HD? 4K?
Minimising file size
Exporting in the right video format
Media Encoder. Webm, mp4, ogg, ogv.
How to create a basic website.
Add fullscreen background video
Add a background video to a hero box.
Integrating with an existing Bootstrap website.
Make the site responsive.
Downloadable exercise files & cheat sheet.
Forum support from me and the rest of the BYOL crew.
Techniques used by professional website designers.
Professional workflows and shortcuts.
A wealth of other resources and websites to help your new career path.
What is the target audience?
YES: This course is for beginners. Aimed at people new to the world of web design. While no previous Dreamweaver experience is necessary, it would be good to do one of my other intro courses before attempting this course.
NO: This course is NOT suited to people experienced in using HTML & CSS.
Course duration 2 hours
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
If you hover above, can you see this little arrow here that will open up that website. What you can do is, you can click on it, and it jumps to that page, cool. If you hold down the 'command' key on a Mac, or 'control' key on a PC before you click it with your mouse, watch this. Can you see, that opens up in a separate tab I don't like doing that, I like just going through. Click, and click, click. Just opening a bunch of them, and just go in through...
and see what you like. You're looking for, I guess, inspirational video styles. How they've made them, kind of wash them out, or different effects just to get your kind of creative juices flowing. Now, watch out for-- see this guy here. You see the little speaker thing here? He is playing music; naughty.
Don't ever do this, don't put-- don't have sound going by default because you get punished by being turned off, and not watched. Yeah! So you're just looking for it. Now, the thing is that some of them are a bit old. You can see there, this doesn't seem to have... the video playing any more.
So, hey-- that's not-- Another one with sound. Go away. All right. So, close these ones down, that's it. That's how to find really cool background videos. Now, this site here doesn't just obviously do video sites.
I love this site, it just has really cool stuff. And it gets 'sites of the day'. So, just kind of beautiful web designing ends up on this place. So, you don't have to use it just for our video stuff. I use it for all sorts of things. All right, I'll see you in the next video.
Where can I find good examples of full-screen video backgrounds?
Awwwards is one of my favourite places to find full-screen video background inspiration. Search for “video background”, then open a few of the featured websites in separate tabs. Compare their video styles, washed-out treatments and effects, but keep an eye out for dated examples and unwanted sound playing automatically.
Where can I find good examples of full-screen video backgrounds?
Key Takeaways
Use Awwwards to find background video examples and broader web design inspiration.
Open several live websites in separate tabs so you can compare ideas easily.
Look at the treatment of the footage, not just the footage itself.
Keep background audio off by default, and expect some older examples to have stopped working.
Start with Awwwards
When I need ideas for a full-screen background video, Awwwards is one of my go-to sites. It brings together all sorts of beautiful web design, so there is plenty to explore beyond a single style or approach.
The easiest starting point is the search. In the layout shown here, it sits towards the top left. Enter “video background” to search through the collection for relevant examples.
A grid of examples gives you several visual directions to explore.
Don’t stop at the preview cards. They are useful for choosing what looks interesting, but opening the actual websites gives you a much better sense of how each background works.
Open a Bunch of Examples in Separate Tabs
I like to open several sites first, then go through them one by one. It keeps the search results handy and makes comparing different approaches much easier.
Hover over a website preview and look for the small arrow that opens the featured website.
Hold Command on a Mac or Control on a PC while clicking the link to open it in a separate tab.
Repeat for a handful of examples that catch your eye.
Move through the tabs and see which ideas you like.
The important thing is to build up a few possibilities rather than settle on the first attractive example.
Look for Video Styles and Visual Treatments
You are looking for inspiration, not just a collection of clips. Pay attention to how each website treats its background video. Has it been washed out? Does it use a particular effect? What makes that treatment appealing?
Look at the background treatment alongside the text and buttons placed over it.
A useful way to compare examples is to separate two things:
The video style: the kind of footage and overall feel that catches your attention.
The visual treatment: how the footage has been softened, washed out or given effects within the design.
That distinction helps you identify what you actually like. Sometimes it is the subject of the footage; sometimes it is what the designer has done with it. That is where the creative ideas start flowing.
Two Things to Watch Out For
Sound playing by default
A lovely background can quickly become irritating when it starts playing music without being asked. My advice is simple: don’t have sound on by default.
Unexpected audio is a good way to get a tab closed. Take inspiration from the visual design without carrying that behaviour into your own site.
Older examples that no longer work
Some featured websites are older, and their background videos may no longer play. If you open an example and nothing happens, move on to another one. A listing can still be there even when the original experience has changed or stopped working.
Use It for More Than Background Videos
Awwwards is not just a collection of video-based websites. Its Site of the Day selections and wider galleries make it useful for all sorts of web design inspiration.
Start with a focused search, explore a few live examples, and notice the details you respond to. Then broaden your search when you need a fresh direction. That is why I keep coming back to it.
Key Terms
Full-screen video background
Video used as the background across the visible screen area, with website content placed over it.
Washed-out treatment
A visual treatment that makes footage look more muted or less intense. It is one of the effects worth noticing when comparing background designs.
Autoplay audio
Sound that begins without someone choosing to play it. For a background video, keep it off by default.
FAQs
Does Awwwards provide only video background inspiration?
No. It features a broad range of web design, including Site of the Day selections, so it is useful for finding ideas beyond video backgrounds.
Why does a featured website no longer show its background video?
Some examples are older and no longer play as they originally did. Try another featured site rather than assuming every listing still has a working video background.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
