Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наша группа в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Видео на 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	Выключает звук при воспроизведении видео.
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>

РЕЗУЛЬТАТ:

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