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




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



PHP Поиск




Наша группа в телеграмм для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @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>

РЕЗУЛЬТАТ:

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


.

Популярное:


Содержание: