Incorporating Video into Web Design

  • July 14, 2017
  • News

When a business decides it’s time to re-design their website, or a new business is looking to create a website, the first thing they think of is video. Incorporating video into your web design has become a lot easier in recent years and when done right, can make your website look slick and professional.

Web designers are becoming increasingly focused on video and the integration of video into a website. It’s not simply a matter of dropping an embed code in anymore, your entire site can be optimised to play video as a rolling background, or as a slick splash page. Successful examples will have the video integrated seamlessly into the design of the page, so that all the design elements work with each other and have a uniform look and feel. Here at Dream Engine, we are seeing more companies looking to create videos tailored for their website, and we’ve developed some tips for a seamless integration

Make a Splash

text video

Many design focused companies are choosing to have a video splash page when you first open up the site. The splash page operates as a means to get the layout of the site, while the video should show off the best aspects of your business in a short montage. There are no rules as to what makes an effective splash screen video, but there are some things to know. The video should be audience focused, what would the average person visiting your site want to know about your company? This is what you should show on your splash page. If you are a company that is design or product focused, show off your products with a slick montage of your products being used. If you are more service based, show the people you help and what you do for them.

The video should focus on shots that work well with your branding and other web design elements. This means using complementary colours and having a distinct contrast between the typeface you choose and the colours in the video. For instance product shots on a white background will pair well with black text and design elements. It can be trial and error to find what works best for you.

Styles of Web Video

The splash video is just one type of website video that we create here at Dream Engine. We have identified a number of types of website video that have great success in bringing in new customers and creating awareness of your brand. The first style of video that should be on your website is the product video.

Product videos show the benefits and special features of your product and they will often show a quick example of how it works, all while engaging the audience and keeping them on your site. Product videos are beneficial for customers who are perhaps considering buying from you, but they need to feel confident they’re choosing the right product.

The next is the testimonial video. Word of mouth is key to building your business. Positive encounters with your customers will lead to happy customers, which will make them more likely to give you a recommendation. Online reviews and comments all contribute to the image of your company.  By creating a testimonial with real, satisfied customers or clients can give you an advantage over your competitors. Hearing about a real experience from a client or customer is much more valuable than a simple online review. If a customer is willing to put their name and face to your product to vouch for it, you have a powerful tool for your marketing.

If you are designing a new website you should also look into an explainer video. Explainer videos are videos that show your viewers how to solve a problem. It could be something that your product solves or a demonstration of your services. Whatever it is, by the end of the video, your audience should understand your product or service and want to take action based on what they’ve seen. When an audience understands you well, you build a rapport with them and they are more likely to enlist you to solve their problems.


Exporting a Website video

When you have worked with your web designer and created a congruent collection of videos, you have to decide how they are going to be played in a technical sense. Product videos testimonials that require sound can be played with an embed code from a hosting site like YouTube, Vimeo or Wistia. However to truly blend web design with video, you will need to use different settings when it comes time to export. Videos can now be displayed in the language of the website with HTML5 video, but this won’t work unless the settings are right. At Dream engine we scale the dimensions of the video to the desired size by the web designer and export the video as an H.264 encoded MP4 file, or alternatively a VP9 encoded WEBM video. These are the most commonly used codecs and containers for website videos and offer the best file size to quality ratio. It is worth exporting several videos at different compression rates to see what gives you the best video quality with the file size reasonably small. Both these codecs hold up well with harsher compression so run a few tests to get the best result.

The Gif that keeps on Giving

Another format that has come back into favour is the animated gif. Controversy around pronunciation aside, the gif has returned to screens in a big way. Popular in the early days of the internet as a way to show small looping animations of dancing babies, gifs have come back as a low-bandwidth way to show a looping video. Gifs are a great thing to embed as thumbnails and can be great for tutorials and product videos. If you are showing a tutorial, what better way than to show the action in a series of gifs so that they are looping and you don’t need to rewatch sections of the video.

Video and UX


The term “UX” is something we don’t use a lot in the video industry, but since working with web designers it’s something we’ve embraced. UX means user experience, and it’s a great way of thinking about what your audience actually wants. They want a smooth experience, that’s visually appealing, doesn’t take forever to load and gives them the information they’re looking for. The relationship between the web designer and video production should aim to enhance the UX as much as possible and make video an integral, yet unobtrusive element of the design. By working together with something of a style guide, you can ensure that the site looks uniform and finely crafted. Identifying colour schemes, coloured frames for embedded videos and appropriate file sizes will make the UX much better, and therefore get better results for the company.


If you’re looking to create a seamless website video plan for your company, get in touch with Dream Engine today.






 Ryan Spanger


Ryan Spanger is one of Melbourne’s most respected and sought-after video production professionals. Ryan founded Dream Engine in 2001, and specializes in helping medium to large corporates, government departments, and the non-profit sector to connect with their audience by using video.

About us and this blog

Based in St. Kilda, Melbourne, Dream Engine is comprised of a small, close-knit team of energetic video production professionals.

Let us help you get your message across. Contact our Melbourne video production company today.

Subscribe to our news updates

Tell us about your project

Let us help you plan your next video production

Latest blog posts

See all posts