If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to manage video samples

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

JS Animated. How to manage video samples

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

js_animated_how_to_manage_video_samples_1

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:

    <h2><strong>Video Samples</strong><span></span></h2>
    <div class="container">
    <div class="row">
    <div class="col-lg-12">
    <div class="list_carousel2 responsive clearfix">
    <ul id="foo2">
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic1.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>01/</span> animals</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic4.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>04/</span> presentations</p>
    </li>
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic2.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>02/</span> sport</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic5.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>05/</span> flowers</p>
    </li>
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic3.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>03/</span> Advertising</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic6.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>06/</span> fashion</p>
    </li>
    <li>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic2.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>02/</span> sport</p>
    <figure><a class="various iframe" href="http://www.youtube.com/embed/2kodXWejuy0?rel=0">
    <img src="img/page1_pic5.jpg" alt=""><em></em></a></figure>
    <p class="title"><span>05/</span> flowers</p>
    </li>
    </ul>
    <hr>
    <div class="list_btn2">
    <a id="prev2" class="prev" href="#"></a>
    <a id="next2" class="next" href="#"></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    
  4. Let’s change the first video thumbnail by editing the following code:

    <img src="img/page1_pic2.jpg" alt="">

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

js_animated_how_to_manage_video_samples_2

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

js_animated_how_to_manage_video_samples_3

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

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

    js_animated_how_to_manage_video_samples_4

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

    js_animated_how_to_manage_video_samples_5

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 “https://www.youtube.com/embed/your_video_id?rel=0” one:

js_animated_how_to_manage_video_samples_6

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

js_animated_how_to_manage_video_samples_7

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:

JS Animated. How to manage video samples