Bootstrap

Вставка адаптивного видео с youtube на сайт без тяжёлой преждевременной загрузки самого плеера.

Вставка адаптивного видео с youtube на сайт без тяжёлой преждевременной загрузки самого плеера.

Всё делается во фрондендной части, т.е. в файлах шаблона страницы html. Предполагается, что необходимые данные, а именно адрес - url нашего видео на сайте youtube, мы уже получили с бэкенда.

Любой адрес видео, который мы получаем на сайте yuotube, нажав на кнопку поделиться, в последней части, после слеша, содержит ID этого видео. Именно он https://youtu.be/XXXXXXXXX, будет фигурировать в html шаблоне, и использоваться в JS скрипте.

Для примера, если движок написан на python, чтобы получить эту часть, ID, у меня создан простой метод, в моделе:

Terminal:

  def getVideoID(self):
    #создали список из разбитой строки по разделителю слэш
    list=self.video.split("/")

    #вернули последний элемент списка, это и есть id видео с ютуба
    return list[-1]

В файле index.html, вот такой фрагмент кода будет служить нам для вставки видео, на сайт. В нём понятно цветом отмечено, где нужно добавить уникальный идентификатор - id видео с youtube. При этом если у клиента отключены js скрипты, то у нас будет работать ссылка на это видео. Но при работающем у клиента js в его браузере, мы естественно уберём эту ссылку и в строим видео, как и планировалось.

Terminal:


<div class="video">
    <a target="_blank" class="video__link" href="https://youtu.be/ {{ vi.getVideoID }}">
        <picture>
            <img class="video__media" id-url="{{ vi.getVideoID }}" src="/static/images/none.png" style="background-image: url(https://i.ytimg.com/vi_webp/{{ vi.getVideoID }}/sddefault.webp)" alt="{{vi.title}}">
        </picture>
    </a>
    <button class="video__button" aria-label="Запустить видео">
        <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
    </button>
</div>

В файле каскадных стилей youtube_video.css, мы будем использовать эти классы для правильного и адаптивного отображения видео. Для этого мы применили маленькую хитрость, во первых мы загружаем изображение превью видео специально в .webp формате, что позволяет делать хостер. Можно выбрать разное разрешение, если они были созданы в момент загрузки видео на хостинг(это крайняя часть адреса изображения в нашем случае sddefault.webp). С помощью загрузки изображения в фон, через атрибут тега img style="background-image: url(https://i.ytimg.com/vi_webp/{{ vi.getVideoID }}/sddefault.webp)". При этом в источник src мы вставили пустое прозрачное изображение, загруженное на наш хостинг, для этих целей. И с помощью каскадных таблиц стилей, мы настроили правильное отображение. Кнопка svg также как и изображение, красиво отработает благодаря css. Задав родительскому блоку класса .video пропорциональный высоте видео padding и установив этот блок родителем с релевантным позиционированием, для абсолютного позиционирования внутри, самого блока img, а в дальнейшем и фрейма с видео, который нам сгенерирует наш js скрипт при клике на это изображение, с кнопкой. И в итоге js из уберёт из DOM и подгрузит на их место iframe с автозапуском видео. При этом таких html блоков может быть сколько-угодно много на странице, и все они будут работать как положено.

В ютуб есть несколько разрешений для отображения превью от default, hqdefault, mqdefault, sddefault и заканчивая maxresdefault. Поэтому для максимального качества нужно было бы вставить style="background-image: url(https://i.ytimg.com/vi_webp/{{ vi.getVideoID }}/maxresdefault.webp) в наш html шаблон.

такой файл ccs youtube_video.css, мы подключаем к нашему документу:

Terminal:

  .page {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

  .video {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      background-color: transparent;
  }

  .video__link {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .video__media {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 1em;

  }

  .video__button {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      display: none;
      padding: 0;
      width: 68px;
      height: 48px;
      border: none;
      background-color: transparent;
      transform: translate(-50%, -50%);
      cursor: pointer;
  }

  .video__button-shape {
      fill: #212121;
      fill-opacity: 0.8;
  }

  .video__button-icon {
      fill: #ffffff;
  }

  .video__button:focus {
      outline: none;
  }

  .video:hover .video__button-shape,
  .video__button:focus .video__button-shape {
      fill: #ff0000;
      fill-opacity: 1;
  }

  /* Enabled */

  .video--enabled {
      cursor: pointer;
  }

  .video--enabled .video__button {
      display: block;
  }

В файле скрипта youtube_video.js, мы будем получать ID видео из атрибута id-url из тега img, в функции parseMediaURL

Terminal:


  function findVideos() {
      let videos = document.querySelectorAll('.video');

      //обрабатываем все найденные блоки с видео, в цикле через функцию setupVideo
      for (let i = 0; i < videos.length; i++) {
          setupVideo(videos[i]);
      }
  }


  function setupVideo(video) {
      let link = video.querySelector('.video__link');
      let media = video.querySelector('.video__media');
      let button = video.querySelector('.video__button');

      //получаем id из атрибута с помощью функции
      let id = parseMediaURL(media);

      //добавляем событие обработки клика на нашем блоке с фоновым изображением
      video.addEventListener('click', () => {

          //создаём фрейм с помощью функции и полученного id
          let iframe = createIframe(id);

//        удаляем ссылку
          link.remove();
//          удаляем кнопку
          button.remove();
//      и загружаем фрейм с видео в шаблон
          video.appendChild(iframe);
      });

      link.removeAttribute('href');
      video.classList.add('video--enabled');
  }

  // получение ID видео из нашего атрибута id-url
  function parseMediaURL(media) {
      let match = media.getAttribute('id-url');
      return match;
  }

  function createIframe(id) {
      let iframe = document.createElement('iframe');

      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allow', 'autoplay');
      iframe.setAttribute('src', generateURL(id));
      iframe.classList.add('video__media');

      return iframe;
  }

  function generateURL(id) {
      let query = '?rel=0&showinfo=0&autoplay=1';

      return 'https://www.youtube.com/embed/' + id + query;
  }

  //фактически вызываем пуск основного цикла этого скрипта
  findVideos();

В файлы index.html,youtube_video.css и youtube_video.js, из этого примера можно взять здесь:
Код — https://gitlab.com/pub_ramanzes/site_youtube_player

Копирование материалов разрешается только с указанием автора Roman Sakhno и индексируемой прямой ссылкой на сайт (http://itdid.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/sahroman.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/sahroman.

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как настроить свой компьютер

  2. Текстовая ссылка:

    Она выглядит вот так: Как настроить свой компьютер

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

крипто-донат, на развитие сайта itdid.ru:

В новом окне с терминалом itdid.ru, введите любую сумму: