JS Animated. How to manage video samples

Hello! This tutorial shows how to manage video samples in JS Animated templates.

You may want to replace both video thumbnail and a video itself in your template:

Let’s learn how to do this.

First, let’s change the video sample thumbnail with your own image:

1. Upload your image to the /img/ directory, let’s say, the image is named my_own_image.jpg.

2. Locate the .html file which contains video samples, in our case it is index.html file.

3. Open the file for editing and find video samples code, it will look similar to the following one:

   Video Samples
   
   
   
   
   
   
   
   
   01/ animals
   
   
   04/ presentations
   
   
   
   
   02/ sport
   
   
   05/ flowers
   
   
   
   
   03/ Advertising
   
   
   06/ fashion
   
   
   
   
   02/ sport
   
   
   05/ flowers
   
   
   
   
   
   
   
   
   
   
   
   

4. Let’s change the first video thumbnail by editing the following code:

Simply change the img/page1_pic2.jpg code to img/my_own_image.jpg one:

Save the file and refresh the page to see the thumbnail is successfully replaced:

Now, when the video thumbnail is replaced, let’s change the video itself:

1. The video sample code looks like the following one:

   

2. Open the video at youtube.com, click Share ->Embed button below the video:

   

The code we need to replace is the one highlighted in the screenshot above.

Simply replace the “http://www.youtube.com/embed/2kodXWejuy0?rel=0” code with the “http://www.youtube.com/embed/your_video_id?rel=0” one:

Save the file and refresh the page to see the video is successfully replaced:

This is the end of the tutorial, you have learnt how to manage video samples in JS Animated templates.

Feel free to check the detailed video tutorial below: