{"id":46040,"date":"2015-04-07T01:24:54","date_gmt":"2015-04-07T05:24:54","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=46040"},"modified":"2015-07-01T10:55:16","modified_gmt":"2015-07-01T14:55:16","slug":"js-animated-how-to-manage-video-samples","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-manage-video-samples.html","title":{"rendered":"JS Animated. How to manage video samples"},"content":{"rendered":"

Hello! This tutorial shows how to manage video samples in JS Animated templates.<\/p>\r\n\r\nJS Animated. How to manage video samples<\/a>\r\n\r\n

You may want to replace both video thumbnail and a video itself in your template:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_1\"<\/a>\r\n

Let’s learn how to do this.<\/p>\r\n

First, let’s change the video sample thumbnail with your own image:<\/p>\r\n

    \r\n
  1. \r\n

    Upload your image to the \/img\/<\/strong> directory, let’s say, the image is named my_own_image.jpg<\/strong>.<\/p><\/li>\r\n

  2. \r\n

    Locate the .html<\/strong> file which contains video samples, in our case it is index.html<\/strong> file.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Open the file for editing and find video samples code, it will look similar to the following one:<\/p>\r\n

    \r\n<h2><strong>Video Samples<\/strong><span><\/span><\/h2>\r\n<div class="container">\r\n<div class="row">\r\n<div class="col-lg-12">\r\n<div class="list_carousel2 responsive clearfix">\r\n<ul id="foo2">\r\n<li>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic1.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>01\/<\/span> animals<\/p>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic4.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>04\/<\/span> presentations<\/p>\r\n<\/li>\r\n<li>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic2.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>02\/<\/span> sport<\/p>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic5.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>05\/<\/span> flowers<\/p>\r\n<\/li>\r\n<li>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic3.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>03\/<\/span> Advertising<\/p>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic6.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>06\/<\/span> fashion<\/p>\r\n<\/li>\r\n<li>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic2.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>02\/<\/span> sport<\/p>\r\n<figure><a class="various iframe" href="http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0">\r\n<img src="img\/page1_pic5.jpg" alt=""><em><\/em><\/a><\/figure>\r\n<p class="title"><span>05\/<\/span> flowers<\/p>\r\n<\/li>\r\n<\/ul>\r\n<hr>\r\n<div class="list_btn2">\r\n<a id="prev2" class="prev" href="#"><\/a>\r\n<a id="next2" class="next" href="#"><\/a>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/pre>\r\n<\/li>\r\n
  4. \r\n  
    Let’s change the first video thumbnail by editing the following code:<\/p>\r\n
    <img src="img\/page1_pic2.jpg" alt=""><\/pre>\r\n<\/li>\r\n<\/ol>\r\n
    Simply change the img\/page1_pic2.jpg<\/strong> code to img\/my_own_image.jpg<\/strong> one:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_2\"<\/a>\r\n
    Save the file and refresh the page to see the thumbnail is successfully replaced:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_3\"<\/a>\r\n
    Now, when the video thumbnail is replaced, let’s change the video itself:<\/p>\r\n
      \r\n
    1. \r\n  
      The video sample code looks like the following one:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_4\"<\/a>\r\n<\/li>\r\n
    2. Open the video at youtube.com<\/strong>, click Share ->Embed<\/strong> button below the video:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_5\"<\/a>\r\n<\/li>\r\n<\/ol>\r\n
      The code we need to replace is the one highlighted in the screenshot above.<\/p>\r\n
      Simply replace the “http:\/\/www.youtube.com\/embed\/2kodXWejuy0?rel=0”<\/strong> code with the “https:\/\/www.youtube.com\/embed\/your_video_id?rel=0”<\/strong> one:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_6\"<\/a>\r\n
      Save the file and refresh the page to see the video is successfully replaced:<\/p>\r\n\r\n\"js_animated_how_to_manage_video_samples_7\"<\/a>\r\n
      This is the end of the tutorial, you have learnt how to manage video samples in JS Animated templates.<\/p>\r\n
      Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to manage video samples<\/a>","protected":false},"excerpt":{"rendered":"
      This tutorial shows how to manage video samples in JS Animated templates.<\/p>\n","protected":false},"author":68,"featured_media":46051,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[2411,1919,527],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46040"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=46040"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46040\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/46051"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=46040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=46040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=46040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}