Immersive Video Template
December 20, 2016 | 4 Feedbacks

Immersive Video Template

A full-screen video presentation, that is resized and animated to become the content of a mobile device.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Lately, we’ve come across a couple of websites using full-screen videos as a way to “dramatically” introduce a product or a feature of an app. We tried to create something similar, in the form of a simple application template.

With the help of some CSS tricks (mostly CSS transforms and animations), we’ve created a video introduction that turns into content for a mobile device. Some of the tricky parts were about picking the right assets (we’ve created this video that introduces some features of a photo editing app) and handling the loading animation. We’re aware that showing a loader right away is not a great experience. Therefore, before using this template you should consider 1) whether the video would be a great selling point or not, and 2) whether you expect many returning visitors, or the goal is just to let the user download the app and (almost) never come back. If the answers to these questions are 1) YES and 2) No, then this template will come in handy for you ;)

Video footage: pexels.com
Inspiration: Landing Page by Cuberto
Icons: Nucleo

Creating the structure

The HTML structure is composed of two main elements: a div.product-intro (product title, action button, ..) and a div.product-preview for the image/video preview of the product.

The video is not directly inserted in the HTML but it’s loaded using JavaScript.

Adding style

On small devices (viewport width less than 800px), the css is pretty straightforward: both the div.product-intro and the div.product-preview are initially hidden ( opacity: 0 ) and then revealed using the cd-item-move-up animation.

The product preview video is not loaded on these devices while an image is used as a preview of the product (div.product-image > img).

On bigger devices, the product intro and preview are initially hidden; once the preview video has been loaded (more in the Events handling section), the .video-is-loaded class is used to reveal the content and trigger the video animation.

For the video animation: the div.product-video is initially scaled-up (using JavaScript) to cover the entire viewport. Once the video has been played for around 1s, the div.product-video is scaled down and translated to the right. The div.product-intro is then animated using the .animate-content class: each item of the intro (h1, p..) is revealed using the cd-item-slide-in animation with a different animation-delay.

Events handling

On big devices, we use jQuery to load the product preview video and insert it into the HTML structure.
We used the canplaythrough event to detect if the video is ready to be played; we also added a check to the readyState of the video  (if the video is cached the canplaythrough event may not be detected).

Once the video is ready, we insert it into the HTML, hide the loader and then trigger the video animation.

Changelog

Dec 20, 2016
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Boba Fett

    Sebastiano: Let me be the first to say it is a great template. I made it work :)

  • Shuvo

    Awesome, It has been so helpfull for me.

  • Anon

    Beautiful work as always. Thanks Sebastiano.

  • NiyuAvril

    Hi Sebastiano, can you help me with the website issue i post in https://codyhouse.co/gem/squeezebox-portfolio-template/

    i think it is already outdated, thank you.. :)