In this short tutorial we would like to show you how to create a hero block with video content loading on demand. The idea is to initially show teaser content, with one or more elements animated as an invitation to click.The video (in our example YouTube video) will load on demand, to reduce page loading time. By the end of the tutorial you will have a fully working jQuery plugin, which will allow you to set optional delay, speed, animation type and triggered containers via simple options, without having the need for unnecessary extra code in your HTML markup.
The original idea comes from our Essential Grid Preview. Many of our customers asked for the script, so at the end of the day we decided to start a freebies section and share our small eye catching scripts and ideas with you.
We will be using some techniques like CSS transitions for modern browsers. The tutorial relies on boilerplates, like HTML5 Boilerplate and jQuery Boilerplate from Jonathan Nicol which we modified a bit to meet our needs.