How to make and embed a video background
Fifteen seconds. That's how long the average visitor will stay browsing your site before moving to another site. When you've got less than a quarter minute to create a great impression, the layout of your homepage can determine the outcome of captivating a customer and then losing them for good. But did you know people spend as much as 88% longer on websites that have video?
Videos catch the eye, are attention-grabbing, and great at communicating vital details about a brand quickly. Including background video on your site's homepage is a super effective and simple way of taking hold of your viewers' attention and encourage the visitors to do something.
But for the non-web designers among us, adding video to your homepage can seem daunting. That's why we've gathered some awesome content inspiration and a quick breakdown of the essentials you'll require to create a background video for your home page.
What should I put in my homepage video background?
Whether or not you decide to include a video background into your website, it's essential to understand what elements generally make the perfect website's homepage. There are some essential elements that must be included:
- Branding elements: Make sure you let users know that they've discovered your brand by the use of co-ordinated elements such as logos, colors scheme, and aesthetic.
- Brand value statements: What do you offer, and why are your offerings different? Make sure to reduce your message to the essentials so even those with a tendency to skip over it will come away with the appropriate message. If you're sure what to include, consider the five "W"s -- who is, what's, where's how, when and why for covering every aspect of your brand.
- Personality of your brand:Is your brand playful and playful or serious and elegant? Be sure that your content is reflective of your vibe! This will give your customers an enjoyable experience, and will help speed up your brand's reputation.
Did you ever know?
The average person spends eighty percent more time visiting sites with videos.
You'll also want to include basic user experience features like:
- Eye-catching visuals and colors:Even if your company's style is predominantly white and black ensure that you choose the right color scheme and adhere to the same color scheme.
- An obvious CTAUltimately, you want your people to take action through your website. It is important to make them aware of what this is, and clear all obstacles to bring the visitors exactly the direction you want them go.
- Engaging copy:We love an eye-catching image, but ensure that you enhance your user experience by providing fun content that matches. This is an excellent way to get your brand's personality and personality, so be imaginative!
- Optimizing screen sizes:Make sure your website as well as your video look stunning regardless of screen or player size. With mobile usage always increasing select a screen which allows your users to view your content any location.
As a designer, I care a lot about presentation and the experience the users have when they view our videos or browsing on our website. The standard features create an amazing-looking player for video." Anna Konsen, Designer at Bloomscape
Website video background examples we are awestruck by
It is time to talk about something. While video may help your website's performance but it could just as quickly detract from it. Nobody wants to be overloaded by autoplay audio or graphically active graphics.
But 58% of businesses include a video on their homepage -- which means there are some companies that do this right. The key is to create a video to evoke an immediate, positive emotional reaction, which ultimately triggers a user action. A homepage video background can be very effective for businesses with appealing and visually pleasing products, represent a distinctive style of living, or offer unique experiences.
Y.Co
The home page of Yacht Brand Y.Co instantly draws you into the excitement of high seas. When landing on this website you'll be able to see the brand's mission statement -- high-quality, powerful watercrafts for people who love luxury and the ocean. This site smartly and strategically makes use of copy on the home page and incorporates effortless CTAs into the user experience.
Mediaboom
Digital marketing firm MediaBoom utilizes understated videos in black and white that allows visitors to enter their world of work. Incorporating shots that include diverse tech equipment including iPhones as well as laptops makes it clear that the agency embraces technology in everything it does, while showing the faces who are behind the screen.
Patagonia
How to make a website video background
For those of us who do not have the technical expertise of a professional The idea of adding the background video of a website to a website's homepage might seem a bit intimidating. But, with the proper equipment, anyone who has a business or site can do it.
2. You can upload your videos (or pull out of our library)
There are two options in selecting the raw material for the background video you choose to use: You could either create yourself or use's vast library of stock videos to get access high quality video in a flash. Let's look at the possibilities.
Shooting your own background video
For those who want to show the actual product, work environment employees or workplace it might be beneficial to invest the time and money to capture some personal video to use on your site's background. Just remember to prioritize quality and high-quality video when going to do it yourself. The goal is to give the most impressive first impression you can!
Using stock videos for your website background
If the quality of your footage isn't adequate (or in the event that you do not have time to make it happen, we get it) -- you can use our preloaded stock video as your background on your website. We provide thousands of completely free videos produced by some of the top web-based creators. We're pretty confident you'll be able to find the perfect video to show the image which you're looking to convey.
3. You can customize your experience to suit your needs.
Create lets you add the text of your choice, as well as your personal brand kit (including logo!) and so much more. Simply trim your video to the length you prefer, add any relevant graphics and text and then you're good to go. The text makes the creation of CTAs super easy, so embedding them into your website is easier than ever.
4. Share and save!
After you've decided on the style and length of your video, you can save it to your account or download the file to your desktop. 's simple embedding process makes it quick and easy to build an outstanding homepage that includes a video background. This is how you can do it:
How do you embed a web background video
For ensuring that your embed appears elegant, anyone on the paid tier are able to hide elements of the player, and can eliminate the play button as well as the progress bar entirely. That way, you can obtain the clear, full-screen video you need to use as a background on your site.
- For embedding the video's background, create your embed code and add the parameter "?background=1" to the end of the URL. By doing this, you can turn off the player's toggles, place the video in an auto loop, set the video to autoplay, and ensure that the audio of the video is turned off. In essence, all you require to make a background video!
- If you want your background video loop with sound, you can add an option "muted=0" to the embed code. For more information on how to embed background videos, check out our full thorough tutorial.
How can I create videos for my site?
There are a variety of options to create a video that can live on your homepage, or be displayed throughout your website.
Create offers tons of endlessly customized templates that make it easy.
Tips for making your background video
- Use a short video loop: The best background videos are usually relatively short loops. Look for those that present a slick endless loop which tells the story of the moment or communicates images. (Also, long videos could make your site's loading times slow, which could be harmful to users and SEO!
- Make sure you select the appropriate video Choose the wrong video and not sending the correct message is worse than choosing a different video in the first place. Make sure you choose the best quality video, with pertinent pictures that are in line with what you want to convey.
- Less is usually more and while it's tempting to get excited about using the most cutting edge gadgets and bells for your site, be sure that your video background does not pull the focus off of your website's main goal. The most impressive video won't help if it leads to a higher bounce rate or creates a confusing user experience. You also want to make sure your users can still read the copy and navigate around the website and follow the CTA.
Create your own video background
Take a look at our wide collection of custom-designed templates that will make your website more attractive and increase your the time spent on your site.
Embed anywhere and everywhere
Making a homepage video for your site as a background is an easy option to help make your site distinct from other websites. However, you could also utilize any sleek branded videos that to use in your marketing materials. Think Facebook cover images, Instagram story slides, as well as more web integration. In addition to being incredibly simple to embed your video by using the platform, you are also able to upload your video to the connected social channels with one click. Pretty sweet, right?