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

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


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




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

<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


6 комментариев:

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

    ОтветитьУдалить
  2. Семён, уж коль попросили помочь сделать видео слайдер, значит кому - то это точно нужно. Удобно размещать короткие видео.

    ОтветитьУдалить
  3. Ирина, ты часто презентации публикуешь, можно попробовать.

    ОтветитьУдалить
  4. всем привет.Меня долго не было,только сейчас пост увидела.Я просила такой код.Для тех,кто часто публикует презентации-Удобно,красиво,компактно.
    https://www.manyofis.site/2019/08/monetka-monitoring.html
    Спасибо Викуля.

    ОтветитьУдалить
  5. Привет. Да обратила внимание - давненько. Ещё одна блогер попросила. Вот так , то особо и не нужен был, а тут возьми, да пригодись.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск