How to Create Animated Video Preview Thumbnails

0

As video takes over images as the most popular media on the web, it is more important than ever to provide your users with animated video preview thumbnails that let viewers know what to expect from your video at a glance. The creation of these previews ranges from easy automation to complex creation by hand, depending on your needs and abilities with video editing software and HTML/CSS/JavaScript code. Read on for a step-by-step guide that will help you create animated video previews.

Why Offer Animated Video Preview Thumbnails?

The web has advanced from the static text-based pages of the past to the interactive pages we have come to enjoy. Today, we expect web pages to respond to our input and show us more than what is on the page at first glance. Video previews do exactly that — they give your users fast access to each video’s contents without a click or page reload. By adding these previews to your website you can expect to see an immediate 10% boost in retention, as viewers are more likely to watch a video that they can preview first. 

Animated Video Summaries:
The Easy Way or The Hard Way?

There are two ways to go about adding animated video previews to your website, one is easy, one could be considered hard, depending on your level of coding skills. 

The easy way involves using Lucid’s advanced artificial intelligence and smart embedded player to create and play video previews on your web site or in your app. Learn more about how Lucid previews work.

With Lucid, there’s no need to manually cut and embed video previews yourself. Instead, each animated video preview is made with the help of a deep learning artificial intelligence module that is trained to pick out scenes that result in clicks/tops. With Lucid there is minimal coding required. Chances are you can just copy and paste a little code and you are set! Plus, Lucid previews include sound, unlike manual previews. 

The other option takes more work on your part. You must cut each individual preview with video editing software, add CSS and JavaScript to your website, and edit a bit of HTML code to embed your videos on your site manually. 

What follows is a step-by-step guide to creating and embedding animated video previews on your website or app. 

Option 1: Create Video Previews The Easy Way

For those that are not highly skilled in video editing, or have large video collections, automated video preview creation is the way to go. Tools such as LucidVideo use artificial intelligence to process your entire video library, intelligently creating short video previews, and then automatically embed them on your website, where users can enjoy the previews for themselves.

The Easy Way Step 1: Add Videos to LucidVideo

Content is added to LucidVideo for processing in two main ways; via manual upload or via MRSS feeds. Manual uploads are simple, just select the videos from your computer and LucidVideo will automatically create the video previews and embed them on your site in place of static thumbnail images. 

Upload Video to Lucid Video to create video preview thumbnails
Upload Your Video to Lucid Video

If you have an MRSS feed of your videos, the process could not be easier; simply paste your MRSS feed’s URL into LucidVideo and the tool will do the rest for you, automatically creating and embedding animated video previews on your website without any further assistance. 

The Easy Way Step 2: Confirm Video Previews Are Showing

The LucidVideo Preview Player looks for certain patterns in your website’s html, and tries to match urls to the external-id or guid of your videos. When it finds a video thumbnail that matches one in your media library, it replaces the static image thumbnail with the corresponding video preview. The LucidVideo tool takes care of everything, so the only thing you need to do to enable previews on your website is to add the JS plugin and pass your publicKey.

For more information on website integration, please take a look at the LucidVideo developer documents. Chances are that your website already has the required setup to make automated video previews work, but if not, there are detailed instructions available to allow the previews to successfully embed. 

Request Demo

Option 2: Manual Video Preview Thumbnail Creation

For those that are not interested in an automated solution, the next best bet is to use a professional video editor such as Final Cut Pro or Adobe Premier Pro to manually cut the video previews. We will be using Final Cut Pro (FCP) as our editing software for the purposes of this how-to guide, but you could also use free options such as iMovie or OpenShot. Most video editors work in a similar manner, so follow along below, starting at Step 4, even if you are not a FCP user. 

The Manual Way Step 1:
Import Your Video to Final Cut Pro

Open FCP and create a new library to house your video previews by selecting File -> New -> Library. When making video previews, it makes sense to uncheck options such as Create Optimized Media, Create Proxy Media, and Fix Audio Problems, as all we want to do here is to cut down a full length video into a few second summary. If you choose not to do so, be prepared to wait for FCP to process your video. Your newly-imported video will be placed on the Browser window within FCP, which is typically on the top left side of the screen. 

Final Cut Pro Video Import Options
Don’t waste time processing audio or transcoding media

The Manual Way Step 2: Create A New Project

Remember, FCP manages its media within Libraries, which contain Projects, and ultimately Events. We already created a Library, now it’s time to create a Project. Simply click on the New Project icon at the bottom of the screen or go to FIle -> New Project

New Project
Start a new project

Once you click on the icon above, you will be prompted to name your project and select its settings. Chances are you can just enter the Project Name here and let FCP set the rest of the options itself. Click OK to continue. 

Final Cut Settings
Final Cut Settings

The Manual Way Step 3:
Add Media To Your Project

Now that you’ve created your project, your next step is to add your video to the project so you can cut a shortened version for your website. Simply drag and drop the video from the browser on the top left of the screen into the timeline at the bottom of the screen. This will give you one long clip that can be trimmed down to create your preview. 

The Manual Way Step 4:
Get To Know Your Video & Remove Spoilers

Now comes the part where you need to do a little thinking. What is the video about? What scenes will help convince someone to watch the video? Don’t give away spoilers! How can you tell the same story as your 90-minute video in just 3-15 seconds? To make the best preview, it is important that you have watched the video and understand its intent so that you know what scenes are important and what scenes can easily be cut, so spend some time getting to know your media. 

The obvious first cuts: The beginning and end. Your viewers don’t want credits in their previews, so the easiest parts to cut are the credits at the beginning and the end of the video. Same goes for the title screen; nix it. 

Next, you need to remove any spoilers. These are scenes that would ruin the video if seen before their time. Take, for example, the Scooby Doo cartoon series. At the end of each episode, the team usually unmasks the bad guy. Obviously, showing this unmasking could ruin the show for someone, so it’s important to remove this scene, and any other spoilers from your previews. 

Once you are comfortable with what scenes are worth cutting and which are worth keeping, you can start the editing process. 

The Manual Way Step 5:
Trim Your Video

By this point, you should know what scenes you want to include in your video preview, and which you can cut. To do the cutting, drag your mouse pointer over the video in the timeline and find the beginning of the first scene you want to include. Click on the clip and tap the B key to switch to the blade tool, and click to cut your video at the start of the scene. Slide your mouse over to the end of the scene, and click and cut it with the blade again. Now you have three clips in the timeline; the first is everything before your selected scene, the next is your scene, and the last one is the rest of your video. 

Single Scene Created for Video Preview
One scene cut in the preview video

Tap the A key to switch to your selection tool, click on the first clip, which is all the video before your selected scene, and then hit the delete key. This will remove the unwanted portion of the video from the timeline. 

Next, continue to choose the clips you want to include in your preview by using the blade tool to isolate the chosen clip from the full video, making sure to delete unwanted portions of the video as you move from left to right on the timeline. Be very picky during this step. It is important to only include scenes that both help tell the story and that can be shortened to just a handful of seconds. 

Final Video Preview Scenes Created
All 12 scenes for the video preview

In the example above, the full 90-minute video has been cut down to 12 different scenes that are a total of 16 seconds in length. This 16-second preview is on the long side, but sometimes it’s hard to decide what scenes to cut and which to keep! For shorter videos, previews should be in the 3-5 second range. 

There is no need to create and in/out transitions or add transitions between clips for your previews, as you want them to be able to loop continuously. 

The Manual Way Step 7:
Export Your Animated Video Preview

Now that you’ve cut your video preview, it’s time to export the video for embedding on your website or inclusion in your app. That means you need to know how you will be using your video. Will you be: 

  • Using a Content Delivery Network (CDN).
    • A CDN will re-encode your video and stream the ideal version for each device and connection combination. 
    • Export at high quality and let the CDN do the compressing. 
    • Lucid ensures fast video streams with a world-wide CDN. 
  • Hosting on your own website, just like you would host an image.
    • Using the HTML5 <video> tag.
    • Requires file-size optimization/compression on export. 

The Manual Way Step 7a:
Export Video for CDN

Content Delivery Networks typically will re-encode your video to optimize it for different devices or connection types. This way your video can be viewed in high quality 1080p or even 4K on devices that support high resolutions and data transmission rates, while also being able to be viewed on a low end mobile device with a 3G wireless connection. If yours handles video optimization, it makes sense to give them a high quality video as the source of their optimized video previews. 

In FCP, go to File -> Share -> Master file (default). This will bring up the file export options dialog box. Here you can name and describe your video, and add tags. The default settings offer a high quality export at a large file size. Obviously, this 258.4MB, 16-second preview would never be streamed at this file size, but since the CDN will be compressing it, you don’t have to worry about the large file size. 

Final Cut Pro Video Preview Export Settings
Final Cut Pro Export Settings

If you click on the settings tab, you can see the default export settings for FCP. Unless your CDN requires a different file type, you should be ok with the default settings. You can ignore the Roles tab for your preview. 

Advanced Video Export Settings
Advanced Export Settings

Go ahead and click Next… and choose where you want the file to be saved. 

The Manual Way Step 7b:
Export Thumbnail Preview Video for Self-Hosting

If you are going to host on your own website and play your previews with the <video> tag, you need to make sure that your video has the perfect mix of file size and quality, as one file will have to work for all devices and connections. 

The first step is to make your master file. If you have not already created one, scroll up and read Step 7a. That will show you how to export your video as a master file. 

Once you have your master file made, it’s time to make it work on every device. That means exporting the file in the correct file type, along with the best resolution and compression settings to keep the file small, but good looking. To do this we’re going to use a free app called HandBrake. Give it a quick download and open it up. Select File -> Open Source (if it did not start with it already open) and navigate to the master file you just exported from FCP, and click Open

HandBrake Video Compression
HandBrake Video Compression

HandBrake will do a quick process of your master file, and then present you with a static thumbnail along with the option to Add to Queue or Start. Don’t start it just yet! First, let’s choose the optimal export options for our video. Remember, we want to optimize for both file size and video quality. By clicking on the Presets icon on the top right of the HandBrake window, you are offered a wide range of pre-made export settings. 

HandBrake Export Settings
HandBrake Export Settings

I tend to choose the “Gmail Large 3 Minutes 720p30” preset for my first test. These settings would produce a 25MB file if it were 3 minutes in length. It does this by reducing the resolution to 720p from 1080p, and compressing the video, without adding too many compression artifacts. Given that our master file is only 16 second long, the new file should be nice and compact. Let’s see!🤩👍

Next, we need to remove audio. The <video> tag will not autoplay unless the video is muted, so there’s no point in keeping audio in the file, as it just wastes file space. So click on the Audio tab and click on any listed audio track and select None

HandBrake Settings
HandBrake Settings

With that, you’re good to go! The default export location is your user’s Movies folder. If that works for you, go ahead and click the Start button and let HandBrake start working. As the video is only a few seconds long, the process should not take long. 

In this case, the resulting video preview was compressed 100x in file size, and it still looks good! You may be happy with a reduction from 231MB to 2.3MB, but some may want to reduce the file size a bit more. Keep in mind that the entire video must be downloaded by your viewer before it will play, so smaller is better, especially if you plan on displaying more than one preview per page. 

Let’s try the Gmail Medium 5 Minutes 480p30 option this time around. Don’t forget to re-disable the audio, and rename your file to include “v2” or something similar at the end in the Save As: section, then click Start again. This time the file was made a bit smaller both in file size and resolution, making it just 1.3MB in size. Depending on how you use it on your website the reduction in pixel size may not be an issue, while the decrease in file size is an important benefit.

The Manual Way Step 7c:
Create Poster Image for Video

The <video> tag allows you to create a poster image that is displayed after page load, but before the video has completed loading. Given that videos can take a bit longer to download over the web than a static image, adding a poster image is typically a good idea. 

The easiest way to create a poster image is to open the master file in Adobe Photoshop and just immediately go to File -> Export -> Export As and choose JPG as the file format, and set the quality to somewhere around 50%. You should also reduce the size of the preview to help speed page load. In this case, I set the poster image to 800px wide and 450px tall, which is the same ratio as the video. Click Export to save the file. 

Create a Video Preview Poster Image in Photoshop
Create a Poster Image In Photoshop

The Manual Way Step 8:
Embed the Preview Thumbnail on your Website

Now that you’ve created your web-ready video preview, it’s time to embed it on your website. If you are using a CDN, please refer to their instructions on how to embed a video on your site. They usually will have a bit of code you can copy and then paste with a <div> on your website. For those that are using the <video> tag to embed on your website, we have provided two display options for. 

Option 1: Mousing over a static image with a play button on top causes video to expand 10% and to play on loop. Video pauses and reduces in size when the mouse moves away, and resumes play/grows when the mouse hovers. Example below:

Option 2: Video automatically plays and loops on page load. The only interaction is a mouse click. Example below.

The Manual Way Step 9a:
Video Preview Embed Option 1

Option 1 CSS:

This option uses the following CSS libraries: Normalize, Tailwind and jQuery.

If these are already used a part of your site, you don’t need to do anything else, if not, be sure the following lines of code are added to the head of any page you wish to embed video previews on:

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"> 
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">

In addition to the libraries listed above, the following CSS must be added to any page you want to display video previews: 

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
   display: none !important;
}

.thumb-wrapper:hover {
   transform: scale(1.1); /* Change amount the video grows. i.e. 1.0 is no change, 1.1 is 10% larger, etc. */
   transition: all .4s ease-in-out;
}

/* Adds play button on top your video */
.playButton {
   position: absolute;
   display: block;
   overflow: hidden;
   z-index: 999;
   padding-left:30px;
   margin-top:-60px;
}

/* Tweaks placement of play button on mobile */
@media only screen and (max-width: 640px) {
   .playButton {
      position: absolute;
      display: block;
      overflow: hidden;
      z-index: 999;
      padding-left:10%;
      margin-top:-60px;
   }
}	

/* Hides play button on hover */	
.thumb-wrapper:hover > .playButton {
   display: none;
}

Option 1 Play Icon:

Download your play button icon here then host it on your website. It’s url will be added to the code below as the Play Icon URL. 

Option 1 HTML:

The following code embeds your video previews on your website. The videos will scale themselves to fill the horizontal space they are given. Be sure to replace the URLs for the Link to Full Video, Poster Image, Video Preview and Play Icon. 

<div class="video thumb-wrapper w-full"> 
<a href="http://www.your-website.com/your-video.html"> <!-- Link to full video -->
   <video class="video-item" loop muted="muted" preload="auto" poster="http://www.your-website.com/poster.jpg"> <!-- Poster image URL -->
      <source src="http://www.your-website.com/preview.mp4" type="video/mp4"> <!-- Preview Video URL -->
Your browser does not support the video tag. 
   </video>
</a>
   <div class="playButton">
      <img src="https://http://www.your-website.com/play-icon.png" width="40"> <!-- Play Icon URL --> 
   </div>
</div>

Option 1 JavaScript:

Place this javascript once on every page that will show video previews. Do not edit. 

<script>
	var figure = $(".video").hover(hoverVideo, hideVideo);
	
	$( document ).ready(function() {
		var THRESHOLD_WIDTH = 640;
		var windowWidth = $( window ).width();
	
		if(windowWidth < THRESHOLD_WIDTH) {
			var array = [0, 1, 2];
			for (let index = 0; index < array.length; index++) {
				const video = $('video', this).get(index);
				video.play();
			}
		}
	});
	
	function hoverVideo(e) {
	  $('video', this).get(0).play();
	}
	
	function hideVideo(e) {
	  $('video', this).get(0).pause();
	}
</script>

The Manual Way Step 9b:
Video Preview Embed Option 2

Option 2 HTML:

This more simple embed does not require any CSS or JavaScript to work. Be sure to update the URLs for your full video link, poster image, and video.

<a href="http://www.your-website.com/your-video.html"> <!-- Link to full video -->
   <video loop autoplay playsinline muted poster="http://www.your-website.com/poster.jpg"> <!-- Poster image URL -->
      <source src="https://333ucr1e6vds1iumcwo7dcxx-wpengine.netdna-ssl.com/wp-content/uploads/2021/02/Computer-Hackers-Preview.mp4" type="video/mp4"> 
         Your browser does not support the video tag. 
   </video>
</a>

Enjoy Your Video Preview Thumbnails!

Adding animated video previews to your app or website is worth the time and effort. You users will respond to your efforts by increasing video views and user retention rates, helping you grow your site and bring in more revenue. If the manual option is not for you, please do not hesitate to reach out to request a demonstration. 

Now that you've mastered the creation of video preview thumbnails, it's time to learn how to embed video in email.

Leave a Reply

Your email address will not be published. Required fields are marked *