слайдер видео для блога

Привет, друзья. Не так давно ко мне обратилась одна моя постоянная читательница с вопросом, как сделать видео - слайдер или галерею видео в блоге. Сегодня вот решила поделиться с вами как это реализовать. Может ещё кому пригодится для отображения нескольких роликов в таком исполнении.


Посмотрите сразу, что мы имеем в итоге.

● ● ● ●

А вот и сам код слайдера для видео

<center>
<div>
<iframe allowfullscreen="" frameborder="0" height="315" name="slider" src="https://www.youtube.com/embed/BhB35ELD_QA?rel=0" width="560"></iframe></div>
</center>
<br />
<center>
<a href="https://www.youtube.com/embed/BhB35ELD_QA?rel=0&amp;autoplay=1" target="slider">●
</a>
<a href="https://www.youtube.com/embed/xFa2_PVMeDQ?rel=0&amp;autoplay=1" target="slider">●
</a>
<a href="https://www.youtube.com/embed/J2KH7q71xeY?rel=0&amp;autoplay=1" target="slider">●
</a><a href="https://www.youtube.com/embed/kgz1KNVMaUU?rel=0&amp;autoplay=1" target="slider">●</a></center>

Если не нужно, чтобы ролики начинались сразу после нажатия на превью, уберите &autoplay=1

Вместо жирной ● можно написать нумерованный список 1. 2, 3 ... Ну, или что - то ещё придумать.

Есть возможность более интересно оформить сам слайдер. Например как в телевизионном кадре . Выглядит примерно так. В статье, ссылку на которую дала, написано где сам адрес ролика (для тех кто не знает).

Все адреса роликов я выделила цветом.  Обратите внимание, в строках, которые отмечены голубым цветом нужно вставить в двух местах адрес первого ролика.

Для добавления ещё видео к списку пропишите дополнительно участки кода

<a href="https://www.youtube.com/embed/kgz1KNVMaUU?rel=0&amp;autoplay=1" target="slider">●</a>

Подобным образом можно отобразить не только видео - ролики с YouTube , но и встроить видео из социальных сетей.

Ещё можно вставить и открыть видео - ролик в новом окне.

Делитесь друзьями своим видео, презентациями, мастер - классами.

Сегодня всё. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email