Регистрация
Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через 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 |
Определяет предварительную загрузку видео. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
|
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>
РЕЗУЛЬТАТ:
Читать дальше: Карты изображений
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости