Categories

Featured templates

JS Animated. How to manage video samples

Andre Flores April 7, 2015
Rating: 5.0. From 1 vote.
Please wait...

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
This entry was posted in JS Animated tutorials and tagged HTML, samples, video. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.