1 1 1 1 1 1 1 1 1 1 Рейтинг: 0.00 - 0 отзывов

Резиновое видео на сайте

Задача: поставить на сайт ролик с Youtube таким образом, чтобы он занимал всегда 100% ширины блока.

Решение: к сожалению поставить только width="100%" недостаточно.

Придется добавить код в css.

Быстро, легко и просто.

Кстати, как правильно пишется: код или кот?

Не все так очевидно.

Код для резинового видео

Изначально мы имеем код ролика Youtube такой:

<iframe width="560" height="315" src="https://www.youtube.com/embed/X7vsH6-W9DU" 
frameborder="0" allow="accelerometer; 
autoplay; 
clipboard-write; 
encrypted-media; 
gyroscope; 
picture-in-picture" allowfullscreen></iframe>

Выглядеть это видео будет вот так:

А мы хотим на всю ширину блока, резиновое видео.

В css шаблона сайта вставляем в самом низу такой код:

.video-youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}

Теперь видео будет выглядеть уже правильно:

Для фанатиков красивости

Так как встречаются размеры видео и старые и новые(16:9 и 4:3), то при таком стандартном способе будут видны черные полосы по краям, если формат не совпадает. В принципе это не страшно.

Вот так будет выглядеть видео 4x3.

А вот так выглядит рассово верное видео. Обратили внимание на то, что над лапой медведя оказывается есть больше расстояние, чем на предыдущем?

А если так будет вырезана самая нужная часть, попавшая за пределы формата 16x9?

Не переубедил?

А вот такой вариант видео?

1. Обычная вставка видео 4x3

2. Правильная вставка резинового видео 4x3

 

Поэтому если уж хочется сойти с ума и сделать все правильно, то придется просто сделать два варианта кода (вставляем в css шаблона своего сайта) и все.

.video-youtube-16x9 {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-youtube-16x9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}

.video-youtube-4x3 {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}
.video-youtube-4x3 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}

Теперь ролик мы вставляем так:

<div class="video-youtube-16x9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/X7vsH6-W9DU" frameborder="0" allowfullscreen></iframe>
</div>

А для 4x3 видео втавляем с таким кодом:

<div class="video-youtube-4x3">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/X7vsH6-W9DU" frameborder="0" allowfullscreen></iframe>
</div>

 

Что мы видим на примере этой статьи?
Если в одном материале собралось много видосиков, это нормально мучает сайт и он грузится медленно
Как с эти легко бороться

Для того, чтобы упростить задачу вставки видео нужного формата, я делаю шаблоны для редактора.

Например для редактора Tiny шаблоны лежат тут: /media/editors/tinymce/templates/

Создаю два шаблона:

  • youtube16x9.html
  • youtube4x3.html
<div class="video-youtube-4x3">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ПОМЕНЯТЬ_ЧАСТЬ_ССЫЛКИ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-youtube-16x9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ПОМЕНЯТЬ_ЧАСТЬ_ССЫЛКИ" frameborder="0" allowfullscreen></iframe>
</div>

Потом достаточно поменять часть ссылки и все. 

Посмотреть хорошее видео

Добавить: