20 Creative Examples of Intro Videos in Web Design

Wednesday, December 20, 2017

Remember when websites used to feature Flash intro videos as part of a splash page? These days video use in Web Design is much more creative (and UX friendly!) with many sites using video to provide an introduction or a tour of their product or service.

Following on from our recent showcase of websites featuring full screen videos, today’s post looks at the sub-trend of intro videos in web design. HTML5 and jQuery make it easy to add dynamic video content to your site without bogging down the browser with Flash. This means designers can start to play with video as part of a website design as well as its content.

The websites below are varied. We selected portfolio websites for video producers, official presentation websites for popular movies, websites for TV shows, websites showcasing TV ads for popular products, or simply websites that use videos in an interactive, unique way.

This post rounds up 20 great examples of video intro use in modern web design, with these designs using video as embedded objects or as lightbox style popups with the help of Javascript.

Mango

This is a lovely app landing page with a user-friendly design. It includes neat features and a beautiful layout that you can use as inspiration for your next projects. Click on the play button to watch the presentation video which will guide you through the most important aspects of this awesome app.

Facebook Moments(Video)

Here is a great app landing page design with a unique and beautiful layout. The designer used lots of animations, lovely fonts, and more. Watch the video to see what this Facebook feature has to offer.

Nest

This is the presentation website of a hi-tech company which offers smart thermostats, smoke & carbon monoxide alarms and security cameras. The presentation video is perfectly embedded into the homepage design.

Paper

Paper is the easiest and most beautiful way to create on the iPad and iPhone. This awesome app was created by the FiftyThree team that builds tools for mobile creation.

REUTERS TV

This is a simple website with a fullscreen video. It’s clear, effective, and exactly what the visitor is looking for. The video starts automatically and guides the user through the content of the site.

SyFy: The Magicians

The Magicians is a fantasy television series that premiered on Syfy and Showcase. This is the official website for this TV show which starts with an intro video. Click on the large, round video play button to watch it.

Control Films

Control Films is a commercial and music video boutique production company based in Paris. You should check out the awesome way videos were integrated into this website’s design.

Sons of Gallipoli

This is the official website for an interactive documentary which follows the stories of two mothers – one Turkish and one Australian – as they contemplate the World War One Battle of Gallipoli on the 100 year anniversary.

Inspiro

Here you have a professional WordPress theme which includes the following features: a lovely fullscreen slideshow, many widgets, and more. You can click on the large video play icon to see the whole presentation video.

Divi

Divi is a wonderful WordPress theme that comes with 18 pre-designed layouts that you can customize until they meet your requirements. Divi 3.0 is the latest version of this popular high-performance WordPress theme. Popular from its initial launch because of its modern and innovative features, Divi’s sales increased dramatically with the introduction of Divi Builder in version 2.0. This frontend Divi Builder’s interface has been significantly upgraded in Divi 3.0, together with the ability to produce live responsive previews anytime during the design process. Divi 3.0 is a high-quality, premium theme, in all respects.

Jumpstart

This is a wonderful free Shopify theme that has a beautiful pre-designed layout that was created especially for online shops. This template is perfect for small shops with a small number of products. This theme includes custom modules with FAQs, blog posts, share promotions, and more.

iA Writer

This is a tool that helps writers get focused and get started, by removing all distraction and creating a calm, focused, writing space. On the homepage, there is a simple and straightforward CTA to watch the presentation video for this app.

Sir John A Day

This is a bilingual educational website to teach Canadians about their first Prime Minister, Sir John A. Macdonald. The website invites Canadian students and educators to explore the legacy of the Fathers of Confederation and Sir John A.. The video player has a custom design which is in theme with the whole website.

Hackery, Maths & Design

The fun 3D animation appears while the website is loading. It has a fluid design with lots of creative effects and animations. Click on the video play icon to see the whole presentation video. Also, make sure you notice the cool effect that appears when you move your mouse on the Play icon. The whole website design is animated and interactive.

Eyezen Challenge

The Eyezen Challenge is an engaging gaming experience that allows users to experiment the Fanatic eSports star Martin “Rekkles” Larsson, using only their eyes.

Studio Marani

Studio Marani is one of the most popular Italian communication firms. The animation on the site is somewhere between traditional and modern. This design makes use of a large, fullscreen video.

Starved for Attention

Worldwide, there are over 195 million stories of malnutrition. Starved for Attention underlines how increased childhood sickness and early death can be prevented with effective nutritional interventions. Their website is straightforward and effective.