JS Animated. Как работать с образцами видео

Здравствуйте! Из этого туториала вы узнаете, как работать с образцами видео в шаблонах JS Animated.

В шаблоне можно заменить и видео-миниатюру, и само видео:

Давайте рассмотрим, как это сделать.

Сначала, изменим образец миниатюры видео вашим собственным изображением:

1. Загрузите изображение в папку /img/, например, файл с названием my_own_image.jpg.

2. Определите файл .html в котором указаны образцы видео, в нашем примере это файл index.html.

3. Откройте файл и найдите код образца видео, он может выглядеть следующим образом:

   <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. Первую миниатюру видео-образца можно заменить редактированием этого кода:

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

Просто замените код img/page1_pic2.jpg на img/my_own_image.jpg:

Сохраните файл и обновите страницу, загрузится новая миниатюра:

Теперь, после замены картинки, можно заменить и само видео:

1. Код образца видео выглядит следующим образом:

   

2. Откройте страницу видео на сайте youtube.com, и нажмите кнопку Поделиться (Share) -> HTML — код (Embed) под видео:

   

На представленном ниже скриншоте мы выделили код, который надо будет заменить.

Просто замените строку «http://www.youtube.com/embed/2kodXWejuy0?rel=0» на «https://www.youtube.com/embed/your_video_id?rel=0»:

Сохраните файл и обновите страницу, теперь на сайте отображается новое видео:

На этом туториал заканчивается. Мы рассмотрели, как работать с образцами видео в шаблонах JS Animated.

Вы также можете воспользоваться детальным видео — туториалом: