Галерея видео: как объединить несколько видеороликов | HTML

Как добавить на сайт видео с видеохостинга

YouTube, ВКонтакте и многие другие сервисы предлагают бесплатно разместить на своём хостинге видеофайл. Для каждого видеофайла они создают отдельную страницу с видеоплеером. Вот пара URL-адресов таких страниц (мультфильм один, а плееры разные):

Благодаря HTML-тегу iframe можно создать элемент, который позволяет на одной странице видеть содержимое другой. Например, 

<iframe src="http://shpargalkablog.ru/2015/03/link.html"></iframe>

Также встраиваются страницы видео с видиохостингов: 

<iframe src="//www.youtube.com/embed/1TYl3jhfEDA"></iframe>

Как поменять URL в iframe с помощью HTML

Нажав на ссылку можно изменить значение атрибута src фрейма. Для чего атрибут target ссылки должен содержать значение атрибута name фрейма. 

<iframe src="http://shpargalkablog.ru/2015/03/link.html" name="raz"></iframe>
<a href="//www.youtube.com/embed/1TYl3jhfEDA" target="raz">Нажать на ссылку</a>

Видео слайдер для сайта

Внимание! Далее в примерах использованы URL-адреса Ютуба (можно заменить на URL-адреса любого другого сайта), так как

  1. сервис позволяет менять настройки ролика, добавляя параметры в URL, например, можно переключаться к определённому моменту, тем самым разбивая одну запись на несколько частей,
  2. есть изображения к видео (превью), в том числе миниатюры.
● ● ● ● 
<style>
.slider { /* блок */ 
  background: rgba(240,240,240,.5);
  text-align: center;
}

/* резиновый iframe: чтобы видео занимало всё доступное пространство и пропорционально уменьшалось/увеличивалось при изменении экрана монитора */ 
.slider div {
  position: relative;
  padding-top: 56.25%;
}
.slider iframe {
  position: absolute;
  top: .5%;
  left: .5%;
  width: 99%;
  height: 99%;
}

/* стиль CSS для кнопок-переключателей (я немного побаловалась), который можно изменять или вовсе не использовать */ 
.slider a {  /* вид кнопок */ 
  display: inline-block;
  padding: 0 .5em;
  text-decoration: none;
  color: blue;
}
.slider a:visited {  /* вид кнопок просмотренных видео */ 
  color: rgb(204,204,203);
}
.slider a:hover {  /* вид кнопок при наведении */ 
  transform: scale(1.5);
}
.slider a:not(:active):focus {  /* блокировка второго клика, но не третьего */ 
  pointer-events: none;
}
.slider a::before {  /* из-за Mozilla Firefox приходится использовать псевдоэлемент */ 
  content: "\25cf";
  position: absolute;
  color: rgba(0,0,1,.1);
  transition: color 0s 9999999s;  /* нужен, чтобы запомнился цвет после нажатия кнопки, подробнее про transition */ 
}
.slider a:nth-of-type(1)::before {  /* вид первой кнопки при загрузки страницы */ 
  color: rgb(0,129,0);
}
.slider span:active a::before {  /* для неактивных кнопок псевдоэлемент не нужен */ 
  color: rgba(0,0,0,0);
  transition: color 0s;
}
.slider span:active a:nth-of-type(1)::before {  /* вид неактивной первой кнопки, чтобы она выглядела как посещённая */ 
  color: #ccc;
  transition: color 0s;
}
.slider span:active a:active::before {  /* вид нажатой кнопки [в Internet Explorer отсутствует всплытие :active] */ 
  color: green;
  transition: color 0s;
}
</style>

<div class="slider">
  <div><iframe src="//www.youtube.com/embed/1TYl3jhfEDA?rel=0" allowfullscreen frameborder="0" name="slider"></iframe></div>
  <span>
    <a href="//www.youtube.com/embed/1TYl3jhfEDA?rel=0&autoplay=1" target="slider">●
</a><a href="//www.youtube.com/embed/xFa2_PVMeDQ?rel=0&autoplay=1" target="slider">●
</a><a href="//www.youtube.com/embed/hSrOpTYKNMw?rel=0&autoplay=1" target="slider">●
</a><a href="//www.youtube.com/embed/WFhzzJjRncI?rel=0&autoplay=1" target="slider">●</a>
  </span>
</div>

Карусель видео с миниатюрами

Точки можно заменить изображениями. 

<style>
.carousel {
  padding: .3em .3em 0;
  background: rgb(240,240,240);
  text-align: center;
}
.carousel div {
  position: relative;
  margin-bottom: .3em;
  padding-top: 56.25%;
}
.carousel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.carousel span {
  display: inline-block;
  word-spacing: 1em;  /* расстояние между картинками */

/* прокрутка миниатюр при необходимости */
  overflow: auto;
  white-space: nowrap;
  word-wrap: normal;

}
.carousel a {
  position: relative;
  display: inline-block;
  max-width: 120px;  /* максимальная ширина миниатюр */
  width: 25%;  /* ширина миниатюр */
  border: 1px solid blue;  /* рамка вокруг миниатюр */
  opacity: .7;  
  text-decoration: none;
}
.carousel a:visited,
.carousel a:nth-of-type(1) {
  border-color: #555;  /* рамка вокруг миниатюр просмотренных видео */
}
.carousel a:hover { 
  opacity: 1;
}
.carousel a:not(:active):focus {
  pointer-events: none;
}
.carousel a::before {
  content: "";
  position: absolute;
  top: 0em;
  right: 0em;
  bottom: 0em;
  left: 0em;
  background: rgba(0,0,1,.1);
  transition: background 0s 9999999s;
}
.carousel a:nth-of-type(1)::before {
  background: rgba(255,255,254,.7);
}
.carousel span:active a::before {
  background: rgba(0,0,0,0);
  transition: background 0s;
}
.carousel span:active a:active::before {
  background: rgba(255,255,255,.7);
  transition: background 0s;
}
.carousel img {
  max-width: 100%;
  vertical-align: middle;  /* убрать нижний отступ до рамки под картинкой */
}
</style>

<div class="carousel">
  <div><iframe src="//www.youtube.com/embed/1TYl3jhfEDA?rel=0" allowfullscreen frameborder="0" name="slider1"></iframe></div>
  <span>
    <a href="//www.youtube.com/embed/1TYl3jhfEDA?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/1TYl3jhfEDA/default.jpg"></a>
    <a href="//www.youtube.com/embed/xFa2_PVMeDQ?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/xFa2_PVMeDQ/default.jpg"></a>
    <a href="//www.youtube.com/embed/hSrOpTYKNMw?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/hSrOpTYKNMw/default.jpg"></a>
    <a href="//www.youtube.com/embed/WFhzzJjRncI?rel=0&autoplay=1" target="slider1"><img src="//img.youtube.com/vi/WFhzzJjRncI/default.jpg"></a>
  </span>
</div>

Видео с боковыми вкладками-переключателями

<style>
.gallery {
  display: flex;
  flex-flow: wrap;
  border: solid rgb(240,240,240);
}
.gallery div {  /* блоки видео + списков */
  flex: 150px;
  position: relative;
  text-align: center;
}
.gallery div:nth-of-type(1) {
  flex: 10000 1 300px;  /* если ширина менее 300 + 150 = 450px , то списки миниатюр смещаются на нижний ряд, подробнее про свойство flex */
}
.gallery div::before {
  content: "";
  display: block;
  padding-top: 100px;
}
.gallery div:nth-of-type(1)::before {
  padding-top: 56.25%;
}
.gallery iframe,
.gallery span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.gallery a {  /* для разнообразия, иконки не затемнены, так проще оценить код галереи видео */
  display: inline-block;
  margin-top: 5px;
}
.gallery a:last-child {
  margin-bottom: 5px;
}
.gallery iframe,
.gallery img {
  max-width: 100%;
  vertical-align: middle;
}
</style>

<div class="gallery">
  <div>
    <iframe src="//www.youtube.com/embed/1TYl3jhfEDA?rel=0" allowfullscreen frameborder="0" name="tab"></iframe>
  </div>
  <div>
    <span>
    <a href="//www.youtube.com/embed/1TYl3jhfEDA?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/1TYl3jhfEDA/default.jpg"></a>
    <a href="//www.youtube.com/embed/xFa2_PVMeDQ?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/xFa2_PVMeDQ/default.jpg"></a>
    <a href="//www.youtube.com/embed/hSrOpTYKNMw?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/hSrOpTYKNMw/default.jpg"></a>
    <a href="//www.youtube.com/embed/WFhzzJjRncI?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/WFhzzJjRncI/default.jpg"></a>
  </span>
  </div>
</div>
в f t
наверх ↑

Комментариев нет: