Видео на HTML-странице

Показать видео посетителям сайта можно:

  • с помощью тега <video>;
  • выложив видео-файл на YouTube.

Тег <video>

<style>
    video {
        display: block;
        width: 720px;
        max-width: 100%;
        height: auto;
    }
</style>
<video controls loop poster="/images/sp2all_ru_7sek_TV.jpg">
    <source src="/images/sp2all_ru_7sek_TV.mp4" type="video/mp4">
    <img src="/images/sp2all_ru_7sek_TV.jpg" alt="Совместные покупки">
</video>

РЕЗУЛЬТАТ:

Атрибуты тега <video>

autoplay
Автоматически запускает воспроизведение.
controls
Отображает элементы управления.
height
Определяет высоту окна для отображения видео.
loop
Зацикливает воспроизведение.
muted
Выключает звук при воспроизведении видео.
playsinline webkit-playsinline
Для ios iphone выключает автоматическое отображение видео на весь экран.
poster
Определяет URL-адрес файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload
Определяет предварительную загрузку видео. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
  • auto – браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение;
  • metadata – браузер загружает первую небольшую часть видео, чтобы определить его основные характеристики;
  • none – отсутствие автоматической загрузки видео.
width
Определяет ширину окна для отображения видео.

Видео с YouTube

Для вставки видео с YouTube применяется тег <iframe>. Но при этом снижается скорость загрузки страницы сайта. А скорость загрузки сайта влияет на показатель конверсии и результаты ранжирования в поисковой выдаче.

Использование атрибута loading="lazy" тега <iframe> решает эту проблему. Так отложенная загрузка видео YouTube экономит ~500 килобайт при начальной загрузке сайта.

<style>
    .YouTube {
        width: 616px;
        max-width: 100%;
        margin: 0 auto;
    }
    @media (max-width: 646px) {
        .YouTube {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
        }
        .YouTube iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
</style>
<div class="YouTube">
    <iframe loading="lazy" src="https://www.youtube.com/embed/np2M9KB5T4g" frameborder="0" allowfullscreen width="616" height="462"></iframe>
</div>

РЕЗУЛЬТАТ:

Читать дальше: Карты изображений


.