Содержание страницы
домикГлавная / Элементы html и css / Видеофон для сайта
видеофон для сайтаНередко для привлечения внимания и оживления страниц html на сайтах вместо обычных фоновых изображений используют видеофоны, которые несомненно заострят внимание посетителей.

В этой статье я покажу, каким образом можно установить видеофон, какие для этого нужны видео файлы и какой код нужно использовать для правильного отображения в браузере.

В примере, для отображение видеофона, я буду использовать код CSS и HTML ( исключая скрипты ) непосредственно для сайта использующего разметку гипертекста HTML5.
Я в своём примере использовал фиксированный видеофон по высоте ( 600px ) при полноэкранном режиме, где внутри его по центру расположил заголовок, картинку и короткое описание. Вы можете добавлять в область видеофона любые элементы html в различные области на ваше усмотрение.

Для видеофонов желательно применять маленькие по весу видео заставки, чтобы они быстро грузились даже у тех пользователей, у которых интернет соединение очень слабенькое. Если ваш ролик всё же имеет большой вес, то рекомендую его сжать до минимального, где качество его останется приемлемым.

Такие видеоклипы, из которых в дальнейшем вы сделаете видеофон, можно брать с Ютуба, либо со специальных порталов, где имеется большой выбор видео презентаций подобного типа ( Videvo.net, Videezy.com, Renderforest.com ).

Требования к видеофону для сайта.

Необходимые требования к видеофону для сайта: видеофайл должен быть в 3-ёх разных форматах ( .webm, .ogv и .mp4 ), чтобы ваш видеофон без проблем отображался во всех основных браузерах.

Я использую для этих целей конвертер видео Movavi Video Converter, с помощью которого необходимые манипуляции с видео я делаю моментально, и который вы можете бесплатно скачать на странице найти программу.

Как установить видеофон для сайта.

Для установки видеофона на страницу сайта, подготовьте видеозаставку в необходимых форматах и закиньте готовые ролики в условную папку video и пропишите в html документе код.

<style>
	*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;}
	body,.dsa,.title,.title img{margin:0;padding:0;}
	.dsa{background:#333;overflow:hidden;position:relative;width:100%;max-height:600px;height:100%;}
	.video{margin:-6px 0;padding:0;position:relative;z-index:0;width:100%;opacity:0.8;}
	.title{color:#fff;font-family:sans-serif;font-size:42px;position:absolute;opacity:.8;z-index:2;top:50%;left:50%;transform:translate(-50%, -50%);display:inline-block;width:100%;text-align:center;}
	.title p{margin:10px;padding:0;line-height:60px;text-shadow:1px 3px 2px #000;}
	.title p.bur{font-size:30px;}
	@media (max-width: 480px){.title{font-size:30px;}.title p.bur{font-size:20px;}.title img {width:300px;}.title p {margin:10px 0;line-height:40px;}}
	@media (max-width: 320px){.title{font-size:20px;}.title p.bur{font-size:14px;}.title p {margin:10px 0;line-height:20px;}}
</style>

<div class="dsa">
	<video class="video" loop="loop" autoplay="" muted="">
		<source src="video/Videofon.mp4" type="video/mp4" /> 
		<source src="video/Videofon.ogv" type="video/ogv" /> 
		<source src="video/Videofon.webm" type="video/webm" /> 
	</video>
	<div class="title">
		<p>Красивый заголовок</p>
		<img src="253.png" alt="" />
		<p class="bur">Краткое описание материала</p>
	</div>
</div>

Параметры для видеофона:

  • muted - присутствие данного параметра означает, что звук в видеофоне будет отключён, чтобы не раздражало пользователей;
  • autoplay - говорит браузеру, что видео запустится автоматически;
  • loop - прописание данного параметра указывает браузеру, что видеролик будет повторяться.
Дата публикации: 02.09.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!