Снимаем дома #1: как создать фон для видео

Как обрабатывать сцену с гринскрином

Если вы до сих пор следовали рекомендациям по работе с green screen, то кеинг футажей будет намного проще. Всегда исправляйте любые проблемы на съемочной площадке, если вы их заметили.

Если при обычной съёмке многие шероховатости можно исправить при монтаже видео, то в случае с гринскрином это не сработает. Это многогранный процесс, который требует скоординированного хода работ.

Кеинг в нелинейном монтаже

На картинке видно, как заменить фон на видео без ошибок: за светлыми волосами на голове человека не видно рефлексов. Кадр будет выглядеть естественно.

Кеинг в DaVinci Resolve

DaVinci Resolve — это бесплатный видеоредактор для цветокоррекции. Читайте обзор как в нашем блоге.

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

Хромакей в Афтер Эффект

Поскольку After Effects — программа для композитинга, то в ней есть несколько встроенных опций, чтобы убрать хромакей в after effects. Например, бесплатный встроенный эффект Keylight — мощный инструмент, разработанный компанией The Foundry.

Кеинг в Premiere Pro

Программа Премьер про — это нелинейный редактор, в нем также встроено много кеинговых эффектов, способных убрать хромакей в adobe premiere pro как в After Effects. Эффекты кеинга в Premiere Pro отличная вещь, если нужно быстро сделать обработку в проекте без переходов в After Effects, что сэкономит вам время рендера и управления файлами.

Единственным недостатком Premiere Pro будет то, что придется делать много ручной маскировки. Для такой работы всё-таки лучше After Effects.

Кеинг в Final Cut Pro

В Final Cut Pro X работа с хромакеем — это более интуитивно понятный процесс по сравнению с другими программами. Это может быть удобно для пользователей любительского видео или ютуберов, которым просто нужно быстрое решение.

Добавьте кадры с гринскрином на временную шкалу (таймлайн), а затем примените к ним эффект Keyer из опций Effects — Keying. Он автоматически удалит весь зелёный цвет с футажа. Если результат не устраивает, то можете зайти в настройки и отрегулировать параметры эффекта Keyer.

Скачать задний фон на видео бесплатно

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

Они выполнены в стиле одноименной мультяшной игры.

Такие бекграунды подойдут тем, кто снимает контент про игры.

Аниме

Если вы поклонник японской мультипликации, то такие фоны точно будут вам по вкусу.

На них изображены герои и различные сцены из аниме.

Тик Ток

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

Они очень яркие и привлекающие внимание. Они выполнены в минималистичном стиле

Они выполнены в минималистичном стиле.

Такие фоны не будут отвлекать зрителя от контента, но визуально его улучшат.

На праздники

Торт, свечки, конфетти, колпаки и воздушные шары – вот что изображено на фонах этой категории.

Они точно создадут атмосферу праздника.

Грустные картинки

Если вы хотите поделиться с аудиторией не самой радостной новостью или просто подчеркнуть эмоциональность контента, то вам стоит обратить внимание на такие бекграунды. Такие варианты подойдут для динамичного ролика

Такие варианты подойдут для динамичного ролика.

Они сделают его более крутым и драйвовым.

Подойдут для легких трендовых клипов.

Такие фоны сделают их более веселыми.

Эстетика

Если вам хочется просто подчеркнуть эстетичность клипа, то лучше использовать картинки из этой категории.

Они все очень красивые и нейтральные.

Соображения и ограничения

При реализации необходимо учесть несколько факторов:

• Автоматическое воспроизведение видео и звука должно быть отключено. Можно создать кнопку включения звука с помощью JavaScript.
• Видео должно иметь изображение-заполнитель для браузеров, которые не поддерживают HTML5. Оно также отображается на мобильных устройствах. Многие смартфоны и планшеты не поддерживают атрибут autoplay.
• Короткое видео может казаться повторяющимся (большинство роликов будет воспроизводиться циклически). Слишком длинное заслуживает того, чтобы стать отдельным элементом дизайна. Оптимальная продолжительность фонового видео составляет 12- 30 секунд.
• Видео должно быть небольшим и сжатым. В то же время оно должно масштабироваться на разных устройствах и экранах. Можно использовать медиазапросы или matchmedia для отправки версий видео разного качества на пользовательские устройства с экранами различных размеров. При этом размер ролика не должен превышать 5 МБ, а в идеале – менее 500 КБ.

Интеграция доступности

Пользователи с вестибулярными расстройствами могут быть дезориентированы. Особенно при попытке прочитать текст, размещенный поверх движущегося изображения. А люди с аутистическими расстройствами могут быть обеспокоены быстрыми изменениями. Поэтому кнопка паузы должна быть расположена в пределах досягаемости:

<button id="vidpause">Pause</button>

Для браузеров, в которых включен параметр доступности Prefers Reduced Motion (в настоящее время Safari 10.1), добавьте скрипт в нижнюю часть страницы:

var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("vidpause");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

По умолчанию для этих пользователей видео будет приостановлено.

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

function vidFade() {
    vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
    // используется только, если "цикл" отключен 
     vid.pause();
	// чтобы охватить IE10
	vidFade();
});
pauseButton.addEventListener("click", function() {
    vid.classList.toggle("stopfade");
	if (vid.paused) {
vid.play();
		pauseButton.innerHTML = "Pause";
	} else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
	}
})

JavaScript добавляет несколько строк кода CSS (для простоты префиксы поставщиков не указаны):

video#bgvid {
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

Также нужно написать CSS для скрытия кнопки на мобильных устройствах. Иначе она будет отображаться на iPhone с iOS 9 или ниже.

Подытожим

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

Многие ошибочно считают, что внешнее оформление канала, в частности его обложка, не достойны особого внимания. Часто владельцы думают: «всем не угодишь», «на вкус и цвет товарища нет», «кто будет смотреть на картинки, если человек пришел за полезным видео» и решают использовать стандартную серую тему. Однако на деле ситуация обстоит иначе: внешняя составляющая играет большую роль для любого пользователя, именно по ней в первую очередь оценивают ваше детище. Поэтому не игнорируйте разобранные пункты и параметры. Выделите время и подберите хорошую обложку.

Green Screen by Do Ink

Сервис для работы с хромакеем. Он считается одной из лучших учебных утилит для начинающих монтажеров в Америке. Он прост в применении и предлагает мощные инструменты. Используйте камеру, загружайте фотографии и видеозаписи с телефона, соединяйте их и редактируйте. Удалить задний план можно с любого фото. Если софт не справится самостоятельно, вы сможете скорректировать все вручную.

Плюсы:

• Запись и сохранение в высоком качестве.
• Внутренний редактор, позволяющий обрезать и соединять видеоклипы.
• Перемещение и масштабирование элементов.

Минусы:

Грин Скрин от компании Do Ink платный и стоит 379 рублей

Интерфейс Green Screen

Как сделать эффект хромакей: постобработка

Не спешите скачивать сложный софт, который используют профессиональные монтажеры: все необходимые инструменты можно найти в русскоязычной программе для монтажа видео «ВидеоМОНТАЖ».

Процесс замены фона в редакторе продуман до самых мелочей, поэтому вы быстро
сможете справиться с поставленной задачей. Следуйте подсказкам: последовательно выполните несколько простых шагов и сохраните обработанный материал в удобном вам виде. Скачать «ВидеоМОНТАЖ» с хромакеем можно
на нашем сайте.

Шаг 1. Запустите программу. В стартовом меню кликните по кнопке «Хромакей». Загрузите в рабочую область ролик, который хотите отредактировать. Не забывайте, что это видео должно быть снято на одноцветном фоне! В противном случае заменить
задний план попросту не получится.

Шаг 2. Добавьте новый фон. После софт предложит загрузить файл, который в дальнейшем выступит в качестве новой подложки. Это может быть любое видео или изображение с ПК.

Шаг 3. Выберите цвет для замены. Просто щелкните по фону, программа запомнит ваш выбор и автоматически удалит однотонную подложку при переходе к следующему шагу. Не паникуйте, если случайно выделили не тот цвет — просто выберите новый.

Шаг 4. Настройте процесс соединения слоев. Вы почти узнали, как самому сделать хромакей — осталось только скорректировать положение видео. Вы можете сдвинуть его влево, вправо, вниз или вверх, а ещё увеличить или уменьшить. Если вокруг вырезанной
фигуры виден удаленный ранее зеленый фон, то поэкспериментируйте с параметрами «Допуск» и «Смешивание» на панели слева.

Шаг 5. Улучшите материал. Фон заменен! ВидеоМОНТАЖ — это еще и удобная программа для нарезки видео! Дальше при желании вы можете скорректировать длительность, обрезав из видео лишние сцены в начале и конце: просто обозначьте с помощью черных маркеров новые границы и нажмите «Далее». Программа автоматически
сохранит внесенные изменения.

Также вы можете заменить звук в видео или добавить фоновую музыку. Загрузите любой трек со своего компьютера или же подберите подходящую мелодию из встроенной в «ВидеоМОНТАЖ» коллекции, а затем настройте громкость и переходи к последнему, шестому,
шагу.

Шаг 6. Сохраните видео. Вы смогли сделать домашний хромакей, осталось только экспортировать обработанный материал из программы удобным вам способом. Вы можете создать HD-видео или ролик в формате AVI, подготовить видеофайл для просмотра с
экранов телефонов и плееров или адаптировать его для загрузки на популярные видеохостинги: YouTube, Яндекс.Видео, Vimeo и другие.

После вы сможете открыть видеозапись в редакторе и усовершенствовать ее при помощи других инструментов, предусмотренных в «ВидеоМОНТАЖе». Добавляйте поверх видеоряда текст и графику, применяйте к ролику эффекты или улучшайте качество вручную,
ускоряйте снятое видео, склеивайте с другими файлами и добавляйте между ними впечатляющие переходы, заменяйте звук.

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

Как максимально эффективно использовать пространство

Чтобы извлечь из фона для канала на Ютубе максимум пользы и результата, на него нужно нанести информацию о вашей компании/вас. Но имеет значение не только содержание, но и место размещения этих сведений. Ниже представлена схема, на который можно увидеть, как баннер отображается на различных экранах.

В «безопасной» зоне нужно размещать наиболее важные данные, их увидят абсолютно все пользователи. Если прибавить бока получится отображение на планшетах (1855 х 423 пикселей). Центральная часть полностью (2560 х 423) отображается для Ютуб зрителей, заходящих с компьютера. Полноразмерная картинка (2560*1440 пикселей) доступна для просмотра с телевизоров.

Предоставленная разметка позволит правильно расположить важные и актуальные сведения .

Вам не нужно убираться дома перед видеозвонком: установите фальшивый фон в Zoom

Фальшивый фон в Zoom

В программе ZOOM студенты сдают экзамены, бизнесмены проводят видеоконференции, онлайн-встречи, делают совместные завтраки, коворкинги, игры и даже танцевальные вечеринки. Теперь вам не нужно убираться дома перед видеозвонком, установите фальшивый фон в Zoom. Вот инструкция, как это сделать:

• Откройте приложение Zoom и войдите в систему.
• Нажмите на значок настроек в правом верхнем углу. Откроется окно настройки программы.
• Переключитесь влево на вкладку «Фон и фильтры».
• В самом начале, приложение проинформирует вас о том, что можно выбрать виртуальный фон «Хромакей». Это интересный фон зеленого цвета — это так называемый основной используемый фон. Если у вас нет зеленой стены или холста, который можно было бы растянуть перед видеозвонком, можно использовать такой одноцветный фальшивый фон.

По умолчанию доступно пять видов виртуальных фонов — три обычных цветных стены и два движущихся рисунка в виде видео, которое предварительно нужно установить себе на ПК, нажав кнопку «Скачать».

• Если вы не выбираете или хотите добавить собственное изображение или видео (например, из фотографий), то используйте кнопку «плюс», она находится справа. Выберите нужный файл, и он появится в качестве фона и данная функция одновременно добавит его в библиотеку по умолчанию.
• Еще одна интересная вкладка с видеофильтрами позволяет добавлять эффекты — изменение цвета или добавление света, в стиле Instagram.

Ниже, на той же странице, вы найдете кнопку «Отразить мое видео», которая показывает изображение уже на экране.  С помощью кнопки «Studio Effects» вы попадаете в бета-версию функции, с помощью которой вы можете изменять цвет губ, корректировать брови и другие линии на лице.

Зачем нужен задний фон при видеозвонке?

Задний фон при видеозвонке

С марта 2020 года мы все привыкли проводить деловые переговоры или встречаться с друзьями и семьей посредством видеозвонков. Но зачем нужен задний фон?

• Не всем нравится вторжение в частную жизнь.
• Под конфиденциальностью мы понимаем то, что в случае видеозвонков люди невольно делятся не только тем, как они выглядят в данный момент, но и тем, как выглядит интерьер дома.
• Поставщики услуг с видеозвонками знают об этом, поэтому они реализовали возможность использования виртуальной окружающей среды. Это позволяет заменить фактический фон предустановленными обоями или собственными фотографиями.
• Вы можете проявить изобретательность и даже убедиться, что звонящие сосредоточены на вашей личности и разговоре, а не на том, что вас окружает.

Пользовательские или виртуальные фоновые функции в настоящее время поддерживаются наиболее часто используемыми мессенджерами и программами:

• Zoom
• Skype
• Teams
• Google Meet и др.

Мы рассмотрим ниже, как изменить и установить фоновые обои по своему вкусу в этих четырех программах. Также вы найдете инструкции, которые подскажут, как действовать в других программах или создать фон в соответствии с вашими предпочтениями.

Фон видеозвонка для Ватсап: инструкция, как сделать?

По умолчанию в Ватсапе стоит смешной фон в виде детской картинки. Не всегда она приемлема, особенно, если ведутся важные деловые переговоры. Но вы можете использовать другой задний план. Вот инструкция, как сделать фон для видеозвонка для Ватсап:

Откройте мессенджер и нажмите «три точки» в правом верхнем углу.

Фон видеозвонка для Ватсап

Появится Меню настроек. Выберите в нем «Чаты», а затем «Обои».

Фон видеозвонка для Ватсап

Выбирайте один из нескольких представленных вариантов на выбор:

• Стандартные — это задний план по умолчанию.
• Библиотека — можно использовать фоны из библиотеки WhatsApp. Для этого скачайте отдельное приложение из Play Store.
• Сплошной цвет — в качестве фона используется заливка сплошным цветом, получается, будто цветная стена на заднем плане.
• Галерея — в качестве фона можно выбрать фото или рисунок с вашего телефона.
• Без обоев — задний план будет в видезаливки серым цветом.

Фон видеозвонка для Ватсап

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

Как убрать зелёный фон в видео бесплатно, используя Хромакей

Сперва установите VSDC на свой компьютер, запустите программу и импортируйте видеофайл, в котором присутствует зелёный фон.

После того, как ролик появился на временной шкале, вы сможете применить эффект Хромакей. Для этого перейдите во вкладку Видеоэффекты (верхнее меню), выберите «Прозрачность» -> «Удаление фона»

Обратите внимание, что во многих случаях зелёный фон не удаляется на этом этапе, поскольку цвет фона может варьироваться в разных видео. Однако вы также заметите, что на временной шкале появился новый слой под названием «Удаление фона 1»

Кликните по нему правой кнопкой мыши, чтобы открыть Свойства. Окно свойств откроется справа, как и показано на иллюстрации ниже.

В окне свойств найдите «Параметры удаления заднего фона» — «Хромакей». Используйте инструмент пипетки, чтобы с точностью определить цвет удаляемого со сцены фона. Просто кликните на иконку пипетки, а затем – в любой области фона видео. Таким образом, программа автоматически определит, какой цвет считать фоном и удалять из кадра.

Иногда даже после того, как вы проделали вышеописанные шаги, тонкая зелёная подсветка остаётся по границе объекта в кадре. Чаще всего это связано с тем, что цвет фона неравномерен или же некачественное освещение во время съёмок привело к образованию бликов и теней, которые помешали удалить задний фон на видео полностью. Однако и это поправимо.

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

• Порог минимальной яркости (как правило, этот параметр требуется увеличить).
• Порог минимальной цветности U.
• Порог минимальной цветности V (как правило, этот параметр требуется увеличить).

Не существует универсальной комбинации, которая позволит вам мгновенно полностью убрать зелёную подсветку, поскольку её причина в каждом видео индивидуальна. Поэтому вам придётся вручную отрегулировать вышеупомянутые параметрами, проверяя результат в режиме реального времени в окне слева.

Если вы используете платную версию VSDC Pro, вам доступны более продвинутые инструменты корректировки. Например, вы сможете включить параметр полупрозрачности и работать с порогами максимальной цветности и максимальной яркости, что даст более быстрый и точный результат.

Искусственный фон

Есть различные материалы, с помощью которых можно создать фон для видео:

• бесшовная бумага;
• ткань (в рулоне и на каркасе);
• пластик;
• велюр и бархат;
• винил.

Пример бумажного фона (фрагмент видео от Wistia)

Вот так «за кадром» выглядит типичный искусственный фон:

В принципе, для фона подойдет и однотонная стена (при условии, что краска лежит ровно и нет изъянов).

Преимущества искусственного фона:

• простота и доступность (достаточно рулона бумаги за 1,5 тыс. руб., крепления за 4 тыс. руб. и пары софтбоксов за 5 тыс. руб.);
• полная концентрация внимания на ведущем (нет отвлекающих элементов на «заднике»);
• профессиональный антураж (создается эффект, что съемка ведется в профессиональной студии, особенно если у вас хорошая камера и звук; хотя по факту фон может располагаться где угодно — хоть в вашей гостиной, хоть в коридоре);
• скрытие недостатков помещения (если ваша квартира или офис в таком состоянии, что их лучше не выставлять на всеобщее обозрение, то искусственный фон — отличное решение).

Но искусственный фон имеет недостатки:

• не дает возможности полностью раскрыть индивидуальность;
• лишает видео динамики.

Их можно частично устранить с помощью таких разновидностей искусственного фона, как доска и хромакей.

Как сделать, поменять фон в Скайпе при видеозвонке: инструкция

Фальшивый фон в Скайпе при видеозвонке

Еще один мессенджер, который пользуется популярностью — это Скайп. Мы часто звоним с его помощью своим друзьям, коллегам по работе или проводим видеоконференции. Как сделать, поменять фон в Скайпе при видеозвонке? Вот инструкция:

• Откройте Skype и щелкните значок своего профиля.
• В открывшемся меню нажмите «Настройки».
• Выберите вкладку «Аудио и видео» слева. Здесь вы увидите пять виртуальных фонов. Остальные расположены под «тремя точками». На данный момент их 20.
• Вы также можете добавить свой фон в Skype. Просто щелкните значок «+» в разделе «Мой фон», Эти окна вы найдете также под «тремя точками».

К сожалению, в Skype не получится сделать анимированный фон, то есть выбрать видео в качестве заднего плана. С другой стороны, вы можете воспользоваться кнопкой «Настройки камеры». С ее помощью откроется окно, в котором есть ползунки для изменения яркости, контрастности, оттенка, насыщенности и других параметров изображения.

Установка видео с YouTube на background сайта:

Все, что помечено «не обязательно» — не обязательно (Капитан Очевидность 🙂 )

3. Подключаем стили

<link rel="stylesheet" href="css/normalize.css" media="all">
<link rel="stylesheet" href="css/style.css" media="all">

4. Подключаем скрипты

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/device.min.js"></script>
<script src="js/jquery.mb.YTPlayer.js"></script>
<script src="js/custom.js"></script>

4а. Подключаем красивый шрифт «Lato» (не обязательно)

Если вы хотите, чтобы у Вас был такой же шрифт, как в «демо», то подключаем красивый шрифт «Lato» от Google. 

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,700,600,800,900' rel='stylesheet' type='text/css'>

Хотя там нет кириллической раскладки, так что по русски вы им все равно ничего не сможете написать.

4b. Подключаем иконки Font Awesome (не обязательно)

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

5а. Если Вам нужно все то, что есть в «демо», то код будет такой: (не обязательно)

    <section class="big-background">
        <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=8WDccXyPxWk',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>

        <div class="pattern"></div>
            <div class="big-background-container">
                    <h1 class="big-background-title">YOUTUBE</h1>
                    <div class="divider"></div>
                    <h1 id="colorize">VIDEO BACKGROUND</h1>
                    <a href="http://bayguzin.ru" class="big-background-btn">от bayguzin.ru</a>
            </div>                                                   
    </section>
   

    <div class="wrapper">

    <section class="about-section">

                <div class="about-section-container">
                    <h2 class="about-section-title">USE A COOL YOUTUBE VIDEO BACKGROUND</h2>
                    <p>Wondering how you might add a video background on your site? <br/>It's so easy! Introducing jQuery MB.YTPlayer, a jQuery plugin that enables you to display Youtube videos on your webpages. <br/>It's so awesome that it can transform your Youtube video into an HTML background at ease! No slow server loading time!</p>
                    <a href="http://bayguzin.ru" target="_blank" class="about-section-btn">Check it here</a>
                </div>

    </section>
           

     <section class="small-background-section">
     <div class="pattern"></div>
                    <div class="small-background-container">
                        <h2 class="small-background-title"><span>Find us on social media</span></h2>
                         <ul class="socials">
                        <li><a href="" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>
                        <li><a href="" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>
                        <li><a href="" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>

                        </ul>
                    </div>
    </section>

</div>

Скрипт подключен, теперь на фоне вашего сайта стоит видео с YouTube. Причем без звука, не пугая пользователя. Надеюсь, скрипт пригодится. Всего хорошего.

Обслуживание мобильных устройств

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

1. Многие мобильные платформы отказываются автоматически воспроизводить HTML5- видео, чтобы уменьшить потребление трафика.
2. На таких платформах фоновое видео будет отображаться со встроенной кнопкой воспроизведения, которая…
3. … может перехватывать прикосновения к устройству, блокируя ссылки в контенте, размещенном поверх фонового видео.

Можно реализовать поддержку автозапуска видео с помощью JavaScript. Но самое простое решение – использовать медиа запрос, который отключает фоновое видео на маленьких экранах, заменяя его изображением-заполнителем. К существующему CSS-коду добавьте:

@media screen and (max-device-width: 800px) {
    html {
         background: url(polina.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

Медиа запрос является наиболее важной частью приведенного выше кого. В настоящее время он определяет, имеет ли экран пользовательского устройства ширину менее 800 пикселей

Если это так, то переключается с фонового видео на статичное изображение.

Особенности оформления

При выборе материала для фон для канала Youtube необходимо брать во внимание несколько параметров. Не стоит использовать многочисленные мелкие детали, не сочетаемые цветовые комбинации, а также изображения, которые не соответствуют требованиям цензуры

1. Качество. Сразу отметайте варианты, которые смазаны, неправильно кадрированы, нечеткие и так далее. Выбирайте те рисунки, которые не нужно растягивать до нужного размера, сжимать или обрезать.
2. Полезная информация. В «безопасной» зоне предоставьте краткую, максимально сжатую рекламную информацию: профиль деятельности, контакты, логотип и так далее. Также в шапке можно размещать анонсы мероприятий, проводимые акции и скидки, выгодные предложения. Картинку изменять и редактировать при необходимости. Это очень удобно для продвижения сезонных товаров: пусть летом стоит картинка с футболками и купальниками из ассортимента вашего магазина, а зимой — со свитерами и куртками.
3. Умеренность. Не стоит перебарщивать с яркими деталями и вообще с элементами. Это как раз тот случай, когда «чем проще — тем лучше». Ниже представлен не самый удачный пример.Однако в ряде случаев яркость может быть на руку — она позволяет выделиться из массы. Но опять же все должно быть в меру, как здесь:
4. Соответствие тематике. Фон должен стопроцентно соответствовать направленности канала. Можно разместить продукты, результаты работы, логотип и так далее. Если вы тревел-блогер уместен будет океан и пляж, если продаете косметику — косметические новинки, рассказываете об автомобилях — разместите красивый авто.

• Логотип. Хороший вариант, чтобы запомниться зрителю и выработать устойчивую ассоциацию с компанией.
• Слоган. Еще хороший вариант — призыв к действию. С их помощью канал из безликого превратится в стильный ресурс.
• Оборудование или команда. У вас современные цеха лучшие в городе? Профессионализму сотрудников завидуют конкуренты? Тогда отличным решением будет разместить работников и используемую технику.
• Выполненные заказы. Отберите самую лучшую свою работу и поместите ее на баннер. Тогда фоновая картинка будет инструментом по привлечению новых потребителей.