Видео на 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>

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