Video Reveal Block Freebie.

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.

 

The layout and the teaser image were created by ThemePunch’s Designer Moritz. The mobile device composition can be downloaded on pixeden for free. The background image is also a free resource from Gratisography.

1. Web Technologies

Just a small overview on the technologies used in this tutorial.
Feel free to browse the resources for additional background information on various topics.

CSS Transitions
Allow property changes in CSS values to occur smoothly over a specified duration.
JavaScript / jQuery
Powerful scripting language with a feature-rich library.
Media Queries
Have media-dependent style sheets tailored for different media types.
HTML5 Markups
This specification defines the 5th major revision of the core language of the World Wide Web.

2. The Markup

To make the plugin flexible, we need to keep things simple. Basically any content should be presentable in this block.
We will need to have some selector which allows us to animate, remove, add things on demand.

Since the effect looks better on a solid colored background or a covering image, we will need to add some dedicated containers for those. For better compatibility we name the classes  hero__background and hero__backgroundcover.

In our example we created an inline style for the background image, however you can also add a class to your style sheet instead.
For SEO purposes, you may wish to exchange the background image with an img tag.
Everything should be wrapped in a container that we can use to control whats happening when clicked.

Lets build the basic container structure, which we will add content to later:

We need to take care of the content shown in the hero block, which  will be wrapped into a container for better handling.  This will also allow us to calculate the height and hide all content during the video callback.

Lets call this container  hero__inner and extend it – for a smooth start – with the startfade class.  In our example we added light weight content only, however you can add any html based content to the  hero_inner container later.

This tutorial will present 5 out of box loop animations with the class names:  loop-pulse, loop-pendulum, loop-shake, loop-flipps, loop-blink.
These class names can be used to breathe life into any of our content elements.

In our example we have two more child containers.
The  hero__mediawrapper and the hero__media container. The mediawrapper will wrap the media container for simultaneous animation and sizing.

Adding all these elements into our current markup, we will end up with something like:

In the example above we used classes like leftblock, rightblock, bigtitle, normaltitle teaser and smalltitle.  These classes have no dependencies nor are they relevant for the Plugin, and are used for styling purposes only.

However you will also find the class name  not__to__remove.  By triggering the video reveal button, we will remove all elements from the hero__inner container one by one in a fancy, animated way.
In some cases we wrap content into other content elements, and to make sure that the animated elements are independent from their parents we may want to ignore out animations on the event.
To have the jQuery function recognise which elements should be ignored, we need a selector. In this case we extend some containers with the class not__to__remove.

3. The CSS

Please note that we don’t use vendor prefixes in the css settings of any of our examples below.You will of course find them in the example download!
In this example we are not going to discuss the default styling of the actual content, since it will have to be individually added, removed and adjusted based on your needs.
Also we use the Normalize.css which is included in the HTML5 Boilerplate.

For better readability we split the css into demo.css, normalize.css and hero.css.
The plugin folder includes .js files and .css files, which belong to the hero functionality directly.
In this chapter we will discuss the content of the hero.css file.

So, lets start with the styling of the hero block, the main background elements and the inner container. To have the background image  hero__background always fill the full hero area without any gaps while respecting the original aspect ratio, we need to set the background-size to “cover” and its width and height to “100%”. The same goes for the overlapping hero__backgroundcover element.
This element can also be styled to be a coloured overlay with opacity, and change its color on the Video Reveal event.

The hero__inner container should have the same maximum width as the width of your page content.
This only looks nice if it is in the same float as the rest of the content on your page. In our example we set it to 1170px width and apply an inner padding for better readability.

Lets take a look at the CSS settings:

The hero__media should be responsive to fill the container, but should not be oversized, since stretched media simply doesn’t look good.
Also it should respect the parent containers 3D attributes. In order to achieve this we set the wrapper container hero__mediawrapper's “transform-style” to “preserve-3d” which allow the child elements to keep its 3D position.

Once the video is shown, we may wish to be able to close it and show the hero block again, including its Animation.  The close button should animate in at start with a smooth slide to right effect.

The style settings for this are:

The “Loop and Remove (out) Animations” are simple CSS transformations.
For this we created animation keyframes. You can find all keyframes in the hero.css document.  The animation speed and delay will be setup via css, however the jQuery part of the Plugin will adjust it based on the amount of elements and options you declared in the initialising mode, or set via the methods of the plugin.

4. The jQuery Part

In our plugin we want to control the speed and type of the remove animation, maybe change the current looping animation, hide the hero block and show the video and set the height of the wrapping container, so its always embedded in a chromeless fashion.

For the video height adjustement we will use the fitvid.js which is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Before we can start we will need to load the current jQuery library, the fitvid.js and the plugin .js files like this:

The download includes the script as a plugin for better usage.
In this part of the tutorial we will discuss the jQuery which initialises the plugin, and some internal methods for better understanding.

Every remove animation has different needs for delays and speeds on the elements.
Since the CSS does not allow us to have variable based options, we can overwrite those settings via jQuery functions.  This can be set at the initialisation of the script and/or changed during runtime with the help of the plugin methods.

These are the default options and the initialisation of the plugin:

The following options are available in the plugin:

animation_delay : 0.04 – this defines the delay between the elements during the remove process

animation_duration : 0.5 – animation speed for the elements during the remove process

dark_duration : 0.6 –  duration of fade to dark animation. Only important if you have the hero__backgroundcover opacity > 0 at start.

trigger : “.hero__media” – defines which selector should trigger the video reveal feature

youtubeid : “Ng9YeN1g6sk” –  YouTube ID of the video to play in reveal mode

removeanim : “vacum” –  The effect to be used during the remove process (vacum, rotate, zoom, fade, tvout, slidehorizontal)

 

The following methods are available to manage the hero block:

changeLoopAnim“:  will change the loop animation on demand. Possible arguments: “pendulum”, “pulse”, “shake”, “blink”, “flipps”, “none”
Example:  jQuery('.hero').heroreveal("changeLoopAnim","pulse");

 

option“:  read/write options.  Without arguments it will return the current settings.  Argument is an object with these keys  “animation_delay”, “animation_duration”, “dark_duration”, “youtubeid”, “removeanim”
Example: jQuery('.hero').heroreveal('option',{removeanim:"fade", animation_delay:"0.07", animation_duration:"0.5"});

 

closeVideo“: close opened video and show hero block again. This is helpful if you wish to trigger the close function externally
Example: jQuery('.hero').heroreveal('closeVideo');

 

showVideo“: open video and remove hero block again. This is helpful if you wish to trigger the video show function externally
Example: jQuery('.hero').heroreveal('showVideo');

In the Download package you will find 2 examples. One is the exact copy of the current available Preview, and one is a simplified version without the live changer.

In the Simple version you can set the Loop animations via the Class you added to your content.  The out animation settings done via the Options of the Plugin you use for Initialising the Hero Block.

License

Our freebies are released under the terms of the MIT license.

The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with our freebie item.

You are allowed to: use any ThemePunch freebie plugin in your project (even commercial projects) as long as the copyright header is left intact.

You MUST NOT:
Provide our freebies on any other site as is.
Sell our freebies.