Небольшие видеоролики можно установить в качестве видеофона заголовка на главной странице сайта или интернет-магазина вместо привычного изображения. Тем самым мы оживим страницу подвижным и нескучным элементом, привлекающим внимание наших посетителей.
Если мы нацелены на активное продвижение своего продукта, то не стоит оставлять без внимания видео презентации. Видеоклип может быть коротким, но достаточно информативным и привлекательным.
Пожалуй, одним из самых ярких примеров использования видео заставки в одном из блоков главной страницы, является сайт клининговой компании Eagleclean (eagleclean.co.uk — раздел Our services). Оригинальное видео способно создать атмосферу доверия к компании и воздействует на визуальную память потенциального клиента.
Как сделать видеофон для сайта
Использование видео на сайте — это увеличение времени на загрузку страницы. Поэтому видеоролик необходимо сжать перед размещением. Лучше сделать его коротким и с плавным переходом от начала к концу, чтобы в режиме автоматического проигрывания не было заметно где начало видео, а где его конец.
Видеофон с YouTube
Один из удобных способов добавления видео в качестве фона страницы — воспользоваться видеороликами с YouTube. В этом случае нам не нужно будет создавать разные форматы видео для всех браузеров. Перед загрузкой видеофона желательно разместить изображение, которое будет показано посетителю пока видео окончательно загрузится.
Способы добавления изображения в header
Мы можем вставить видео с помощью iframe-кода, но чтобы применить различные настройки воспроизведения воспользуемся jquery плагином YoutubeBackground. Это обертка для Youtube API — он отлично подходит для полноэкранных фоновых видео или обычных видеороликов.
Создайте файл video-background.js и скопируйте в него этот код:
(function ($) {
"use strict";
jQuery(document).ready(function () {
$("#demo").YTPlayer({
videoId: "X_LrrqVrLe4"
});
});
})(jQuery);
/*
* YoutubeBackground - A wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*
* Version: 1.0.5
*
*/
// Chain of Responsibility pattern. Creates base class that can be overridden.
if (typeof Object.create !== "function") {
Object.create = function (obj) {
function F() {}
F.prototype = obj;
return new F();
};
}
(function ($, window, document) {
var loadAPI = function loadAPI(callback) {
// Load Youtube API
var tag = document.createElement("script"),
head = document.getElementsByTagName("head")[0];
if (window.location.origin == "file://") {
tag.src = "http://www.youtube.com/iframe_api";
} else {
tag.src = "//www.youtube.com/iframe_api";
}
head.appendChild(tag);
// Clean up Tags.
head = null;
tag = null;
iframeIsReady(callback);
},
iframeIsReady = function iframeIsReady(callback) {
// Listen for Gobal YT player callback
if (
typeof YT === "undefined" &&
typeof window.loadingPlayer === "undefined"
) {
// Prevents Ready Event from being called twice
window.loadingPlayer = true;
// Creates deferred so, other players know when to wait.
window.dfd = $.Deferred();
window.onYouTubeIframeAPIReady = function () {
window.onYouTubeIframeAPIReady = null;
window.dfd.resolve("done");
callback();
};
} else if (typeof YT === "object") {
callback();
} else {
window.dfd.done(function (name) {
callback();
});
}
};
// YTPlayer Object
YTPlayer = {
player: null,
// Defaults
defaults: {
ratio: 16 / 9,
videoId: "LSmgKRx5pBo",
mute: true,
repeat: true,
width: $(window).width(),
playButtonClass: "YTPlayer-play",
pauseButtonClass: "YTPlayer-pause",
muteButtonClass: "YTPlayer-mute",
volumeUpClass: "YTPlayer-volume-up",
volumeDownClass: "YTPlayer-volume-down",
start: 0,
pauseOnScroll: false,
fitToBackground: true,
playerVars: {
iv_load_policy: 3,
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: "opaque",
branding: 0,
autohide: 0
},
events: null
},
/**
* @function init
* Intializes YTPlayer object
*/
init: function init(node, userOptions) {
var self = this;
self.userOptions = userOptions;
(self.$body = $("body")),
(self.$node = $(node)),
(self.$window = $(window));
// Setup event defaults with the reference to this
self.defaults.events = {
onReady: function (e) {
self.onPlayerReady(e);
// setup up pause on scroll
if (self.options.pauseOnScroll) {
self.pauseOnScroll();
}
// Callback for when finished
if (typeof self.options.callback == "function") {
self.options.callback.call(this);
}
},
onStateChange: function (e) {
if (e.data === 1) {
self.$node.find("img").fadeOut(400);
self.$node.addClass("loaded");
} else if (e.data === 0 && self.options.repeat) {
// video ended and repeat option is set true
self.player.seekTo(self.options.start);
}
}
};
self.options = $.extend(true, {}, self.defaults, self.userOptions);
self.options.height = Math.ceil(self.options.width / self.options.ratio);
self.ID = new Date().getTime();
self.holderID = "YTPlayer-ID-" + self.ID;
if (self.options.fitToBackground) {
self.createBackgroundVideo();
} else {
self.createContainerVideo();
}
// Listen for Resize Event
self.$window.on("resize.YTplayer" + self.ID, function () {
self.resize(self);
});
loadAPI(self.onYouTubeIframeAPIReady.bind(self));
self.resize(self);
return self;
},
/**
* @function pauseOnScroll
* Adds window events to pause video on scroll.
*/
pauseOnScroll: function pauseOnScroll() {
var self = this;
self.$window.on("scroll.YTplayer" + self.ID, function () {
var state = self.player.getPlayerState();
if (state === 1) {
self.player.pauseVideo();
}
});
self.$window.scrollStopped(function () {
var state = self.player.getPlayerState();
if (state === 2) {
self.player.playVideo();
}
});
},
/**
* @function createContainerVideo
* Adds HTML for video in a container
*/
createContainerVideo: function createContainerVideo() {
var self = this;
/*jshint multistr: true */
var $YTPlayerString = $(
'<div id="ytplayer-container' +
self.ID +
'" >\
<div id="' +
self.holderID +
'" class="ytplayer-player-inline"></div>\
</div> \
<div id="ytplayer-shield" class="ytplayer-shield"></div>'
);
self.$node.append($YTPlayerString);
self.$YTPlayerString = $YTPlayerString;
$YTPlayerString = null;
},
/**
* @function createBackgroundVideo
* Adds HTML for video background
*/
createBackgroundVideo: function createBackgroundVideo() {
/*jshint multistr: true */
var self = this,
$YTPlayerString = $(
'<div id="ytplayer-container' +
self.ID +
'" class="ytplayer-container background">\
<div id="' +
self.holderID +
'" class="ytplayer-player"></div>\
</div>\
<div id="ytplayer-shield" class="ytplayer-shield"></div>'
);
self.$node.append($YTPlayerString);
self.$YTPlayerString = $YTPlayerString;
$YTPlayerString = null;
},
/**
* @function resize
* Resize event to change video size
*/
resize: function resize(self) {
//var self = this;
var container = $(window);
if (!self.options.fitToBackground) {
container = self.$node;
}
var width = container.width(),
pWidth, // player width, to be defined
height = container.height(),
pHeight, // player height, tbd
$YTPlayerPlayer = $("#" + self.holderID);
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / self.options.ratio < height) {
pWidth = Math.ceil(height * self.options.ratio); // get new player width
$YTPlayerPlayer
.width(pWidth)
.height(height)
.css({
left: (width - pWidth) / 2
}); // player width is greater, offset left; reset top
} else {
// new video width < window width (gap to right)
pHeight = Math.ceil(width / self.options.ratio); // get new player height
$YTPlayerPlayer.width(width).height(pHeight).css({
left: 0
}); // player height is greater, offset top; reset left
}
$YTPlayerPlayer = null;
container = null;
},
/**
* @function onYouTubeIframeAPIReady
* @ params {object} YTPlayer object for access to options
* Youtube API calls this function when the player is ready.
*/
onYouTubeIframeAPIReady: function onYouTubeIframeAPIReady() {
var self = this;
self.player = new window.YT.Player(self.holderID, self.options);
},
/**
* @function onPlayerReady
* @ params {event} window event from youtube player
*/
onPlayerReady: function onPlayerReady(e) {
if (this.options.mute) {
e.target.mute();
}
e.target.playVideo();
},
/**
* @function getPlayer
* returns youtube player
*/
getPlayer: function getPlayer() {
return this.player;
},
/**
* @function destroy
* destroys all!
*/
destroy: function destroy() {
var self = this;
self.$node
.removeData("yt-init")
.removeData("ytPlayer")
.removeClass("loaded");
self.$YTPlayerString.remove();
$(window).off("resize.YTplayer" + self.ID);
$(window).off("scroll.YTplayer" + self.ID);
self.$body = null;
self.$node = null;
self.$YTPlayerString = null;
self.player.destroy();
self.player = null;
}
};
// Scroll Stopped event.
$.fn.scrollStopped = function (callback) {
var $this = $(this),
self = this;
$this.scroll(function () {
if ($this.data("scrollTimeout")) {
clearTimeout($this.data("scrollTimeout"));
}
$this.data("scrollTimeout", setTimeout(callback, 250, self));
});
};
// Create plugin
$.fn.YTPlayer = function (options) {
return this.each(function () {
var el = this;
$(el).data("yt-init", true);
var player = Object.create(YTPlayer);
player.init(el, options);
$.data(el, "ytPlayer", player);
});
};
})(jQuery, window, document);
Загрузите файл на хостинг в папку JS. Если это сайт WordPress, подключите скрипт к вашей теме. Для этого скопируйте этот код в functions.php.
/**
Enqueues scripts video-background.
*/
function webkato_scripts() {
wp_enqueue_script( 'video-background', get_template_directory_uri() . '/js/video-background.js', array('jquery'), true );
}
add_action( 'wp_enqueue_scripts', 'webkato_scripts' );
Если это HTML сайт, добавьте в футер этот код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="src/jquery.youtubebackground.js"></script>
В этом участке скрипта замените ID видео на свой. ID — это конец ссылки видео на YouTube (https://youtu.be/X_LrrqVrLe4)
jQuery(document).ready(function() {
$("#demo").YTPlayer({
videoId: "X_LrrqVrLe4"
});
});
Теперь скопируйте HTML код блока с видеофоном и вставьте его там, где это необходимо. Создайте подходящее изображение, которое будет появляться раньше, чем видеоролик.
<div id="demo">
<img class="boke" src="https://source.unsplash.com/user/erondu" alt="фон">
<div class="bg-image-cover"></div>
</div>
Теперь скопируйте стили CSS в свой файл.
#demo {
position: relative;
overflow: hidden;
width: 100%;
height: 600px;
/*height: 100vh; для полноэкранного фона*/
background: transparent;
}
.boke {
position: absolute;
object-fit: cover;
top: 0;
width: 100%;
height: 100%;
}
.ytplayer-container {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
height: 0;
width: 100%;
padding: 0;
padding-bottom: 56.25%;
}
.ytplayer-player {
height: calc(100% + 250px) !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
pointer-events: none;
margin-top: -125px;
}
.bg-image-cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #444 url(https://c.radikal.ru/c06/1809/60/ed3ac1815a4b.png);
}
HTML5 видеофон для сайта
<section class="hero">
<div class="video-hero">
<video class="video" loop="loop" autoplay="" muted="">
<source src="#" type="video/mp4" />
<source src="#" type="video/ogv" />
<source src="https://www.videvo.net/videvo_files/converted/2014_12/preview/TV_Studio_Camera_Lens_System_Close.mp466794.webm" type="video/webm" />
</video>
<div class="about-title"><a href="#">Заголовок</a></div>
</div>
</section>
/*Видео фон*/
.hero {
overflow: hidden;
}
.video-hero {
padding: calc(10% + 40px) 0;
background: #444 url(https://c.radikal.ru/c06/1809/60/ed3ac1815a4b.png);
position: relative;
}
.about-title {
font-family: sans-serif;
font-size: 70px;
text-align: center;
position: relative;
opacity: 0.5;
}
.about-title a {
text-decoration: none;
color: #fff;
}
/* VIDEO */
.video-hero .video {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 100%;
transform: translate(-50%, -50%);
opacity: 0.5;
}
@media (max-width: 768px) {
.video-hero {
padding: calc(10% + 40px) 0;
}
}
@media (max-width: 480px) {
.about-title {
font-size: 40px;
}
}
Если у вас сайт Worpress, добавляйте HTML-код в виджет или на любую страницу через визуальный редактор.
Где брать шаблоны для создания видеороликов?
Моя небольшая подборка сайтов с качественными видео материалами для создания промороликов и видеофонов.
Elements-envato.com — внушительная коллекция бесплатных видео шаблонов, 3D визуализаций, и наборов профессионально разработанной анимированной графики. Имеет удобный фильтр в котором можно отсортировать список по частоте кадра, разрешению и другим параметрам.
Videvo.net — бесплатный видео сток, на котором размещены интересные футажи, графика и звуковые эффекты. Видео футажи — это короткие ролики, используемые для видеомонтажа. Также их можно найти на YouTube каналах в свободном доступе.
Renderforest.com — качественные видео шаблоны, слайдеры, анимации и аудиофайлы для бизнеса. Создавать проморолики можно прямо на сайте. Мне очень понравился их редактор. Все настройки просты и понятны. Самое главное, что на создание ролика затрачивается намного меньше времени, по сравнению с монтажом на компьютере. Видео до 3-х минут предоставляется бесплатно. Кроме того, на этом сервисе можно создать логотип, редактировать мокап и даже создать бесплатные сайты.
Бесплатные источники изображений для сайтов
Videezy.com — коллекция высококачественных видеоклипов в бесплатном и премиальном доступе.