Полноэкранное видео на HTML5 с CSS и JS
 | |
| В текущем материале представлено 2 варианта для создание видео виде фона, где подробно узнаем про установку роликов в качестве фона background для сайтов. Здесь сразу нужно подчеркнуть, что фон в качестве видео для сайта или страницы можно создать только с помощью HTML5. Не секрет, что видео, которые воспроизводятся автоматически при загрузке страницы все больше становятся популярными, и на некоторых сайтах трудно представить без такого обзора. Не секрет, что видео ролики, что идут в отличном качестве просмотра, будут автоматом повышает к ним большую заинтересованность от гостей и пользователя, что находится на сайте. Следует помнить, что сюжет ролика должен иметь отношение к бренду или к тематике вашего интернет ресурса. Свойства CSS background или background-image изначально приниматься в качестве заданного значение для изображения, SVG, оттенок цвета и градиенты. А вот видео ролик можно задействовать в качестве оригинального фона, который размещается позади других HTML-элементов. Сама задача понятная, это, чтоб все корректно показывало на всю ширину экрана, а точнее, это заполнение окно браузера. И нужно помнить, что все должно идти в адаптивном виде, как изображения, которое устанавливают под фон. Приступаем к установке: HTML Код <div id="gedsamolesan"> <video autoplay muted loop> <source src="Ссылка на изображение в формате.mp4" type="video/mp4"> </video> </div> CSS Код #gedsamolesan { overflow: hidden; height: 397px; background: #edeae8; position: relative; } video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } JS Код var video = document.querySelector('video') , container = document.querySelector('#gedsamolesan'); var setVideoDimensions = function () { var w = video.videoWidth , h = video.videoHeight; var videoRatio = (w / h).toFixed(2); var containerStyles = window.getComputedStyle(container) , minW = parseInt( containerStyles.getPropertyValue('width') ) , minH = parseInt( containerStyles.getPropertyValue('height') ); var widthRatio = minW / w , heightRatio = minH / h; if (widthRatio > heightRatio) { var newWidth = minW; var newHeight = Math.ceil( newWidth / videoRatio ); } else { var newHeight = minH; var newWidth = Math.ceil( newHeight * videoRatio ); } video.style.width = newWidth + 'px'; video.style.height = newHeight + 'px'; }; video.addEventListener('loadedmetadata', setVideoDimensions, false); window.addEventListener('resize', setVideoDimensions, false); Вашему вниманию отличная концепция для сайта, где идет простой в использовании плагин на основе JS, который работает над видео элементом HTML5 и в принципе правильно показывает фоновое видео внутри контейнера. Демонстрация Второй вариант видео в качестве фона сайта на HTML5 HTML Код <video autoplay loop muted class="vedosekales" id="vedosekales"> <source src="Ссылка в формате.mp4" type="video/mp4"></source> </video> CSS Код body { background: url('Первый кадр video.png'); background-size: cover; } .vedosekales { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -9999; } Вероятно этот способ самый простой как по своим форматам, там и по установке, где стразу при открытие запускается видео и не каких ошибок не происходит, не было замечено, чтоб лишний раз перезагружать страницу, чтоб все заиграло. Изначально высота поставлена на 100%, где создается выравнивание ролика, картинки, что происходит по правой стороне. Также не забываем, что видео не станет показывать, что бываем, то здесь автоматически подключается для фона изображение, что изначально задали для тега body, где может стать первый кадр. PS - также есть много различных других вариантов, как можно разместить грамотно фон, как видео, где также есть еще один популярный вариант на установку полноэкранное видео фона, что аналогично работает на ссылке, но с другим функционалом. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |