Как поставить видео с Youtube на фон сайта

Всем привет. Позавчера в ВК списался с одним парнем, который хотел сделать видеофон для сайта. (Привет Стас 🙂 Надеюсь ты не против, что я пишу эту статью подобным образом). Так вот, у него возникла проблема. С его слов я понял, что он делает сайт на конструкторе и загрузить свои видео на хостинг — нет возможности. Единственный способ, как он сказал, это подключить видео со стороннего сервиса.

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

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

Я скинул Станиславу 2 ссылки, одну с хабра, одну с другого сайта.

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

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

Скачать исходник

Первым делом нужно скачать исходник, там в папке js будет лежать 2 скрипта. Их нужно скопировать в свой проект. После этого подключаем jquery и прописываем пути к скриптам:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- подключаем jquery -->
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> <!-- подключаем плагин -->
<script type="text/javascript" charset="utf-8" src="js/index.js"></script> <!-- добавляем id видеофайла с Youtube -->

Теперь, для того, чтобы вставить свое видео, нужно в скрипт подставит id видео файла из ссылки на Youtube:

Файл index. js:

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

Убедитесь, что в ролике не присутствует реклама или ссылки на другие материалы, как в примере выше. Я специально взял такое видео, чтобы вы наглядно убедились и не допустили подобной ошибки. Start: 3 — означает, что видео начнет воспроизводится с 3 секунды. Другие настройки найдете в файле jquery.tubular.1.0.js, начиная с 19 строки. Звук, ширина и высота, кнопки управления и т.д.

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

<div>

 <p>smartlanding.biz</p>

</div>

А на сегодня — все! Теперь вы знаете как поставить видео с Youtube на фон сайта. Всем пока!

P.s.: Для того, чтобы посмотреть результат, залейте на локальный или реальный сервер.

Руководство по оптимизации YouTube: как улучшить ваш канал

Хотите создать свой YouTube-канал или повысить количество просмотров? Сандрин Сахакианс, мультимедиа продюсер блога о продвижении контента Buffer, дает советы о том, как оптимизировать канал на YouTube.

Видео становится все более популярным типом контента – представляем вам руководство по оптимизации, которое поможет улучшить ваш канал на YouTube и привлечь новых подписчиков.

Оптимизация домашней страницы YouTube

Подумайте о вашем канале на YouTube как о веб-сайте: что должны узнать и почувствовать пользователи, когда они заходят на страницу вашего канала?

Визуальное оформление

YouTube позволяет выбрать изображение для иконки канала (icon), а также фоновое изображение (channel art):

Пример оформления YouTube-канала. Фото: Vsauce.

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

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

Фоновое изображение отражается по-разному в зависимости от размера экрана устройства. Для хорошего отображения на любом устройстве YouTube рекомендует использовать одно изображение размером 2560 x 1440 px, при этом основная важная информация должна быть размещена в прямоугольнике в центре и не выходить за рамки 1546 x 423 px.

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

Трейлер: представление канала новым пользователям

Трейлер – это видео, которое представляет ваш канал новым пользователям.

YouTube позволяет выбрать видео, которое будет показываться новым пользователям. Фото: Buffer.

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

YouTube дает советы, как сделать хороший трейлер.

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

Организация контента

Организация контента на вашей странице позволит зрителям лучше ориентироваться. Фото: Buffer.

Использование секций поможет вашим подписчикам лучше ориентироваться в вашем контенте. Инструкцию YouTube о том, как организовать секции, вы можете прочитать здесь.

Плейлисты – это еще один хороший инструмент для организации ваших видео, благодаря которому зрители легко могут найти видео на интересующую их тематику.

Оптимизация видео на YouTube

Теперь, когда вы оптимизировали страницу, можно перейти к оптимизации самих видео. Миниатюры видео.

Миниатюры видео на YouTube. Фото: Buffer.

Миниатюры – это ваши друзья! Они – один из основных инструментов, который помогает привлечь внимание зрителей и заставить их кликнуть на видео. Думайте о миниатюрах как о своего рода обложке книги: они должны быть визуально привлекательными, вызывать эмоции и интерес.

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

Стандартизированные миниатюры канала на YouTube. Фото: Buffer.

Название видео

Названия привлекают внимание зрителей. Фото: Buffer.

Название – это еще один способ привлечь внимание зрителей и вызывать у них желание посмотреть ваше видео. ReelSEO дает советы о том, какие названия давать видео.

• Используйте намек на содержание видео.
• Не раскрывайте все, но заинтересовывайте зрителей, например, скажите, что они узнают и чему научатся из этого видео.
• Помните об ограничениях в количестве знаков (YouTube позволяет использовать до 100 знаков в названиях видео).
• Проверьте ключевые слова в поиске.

Описание видео

Описание видео – это важная часть информации о вашем видео. Некоторые советы об оптимизации описания.

• Давайте ссылку на внешний URL.
• Синопсис должен быть 200-500 слов.
• Включайте в описание призыв к действию.
• Включайте ссылку «Подпишитесь здесь».
• Давайте ссылки на социальные медиа.
• Выбирайте правильную категорию.

Теги

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

Используйте тэги, наиболее точно описывающие ваше видео. Фото: Buffer.

Призыв к действию

Итак, зрители посмотрели ваше видео. Что дальше? Ваше видео должно заканчиваться понятным для зрителя призывом к действию. Это может быть призыв:

• подписаться на канал;
• оставить комментарий или лайк;
• посмотреть другое видео;
• посетить ваш веб-сайт.

Хорошей идеей будет также добавить призыв к действию и ссылку в описание вашего видео.

Создание фонового изображения канала YouTube | от Вектор | Vectr

Нет пользователя Интернета, который никогда не слышал о Youtube — второй по величине поисковой системе в мире после Google. Справедливости ради стоит сказать, что все дороги интернета ведут в Youtube как к огромному хранилищу рекламы, обучающих видео, влогов, телешоу и т.д. Более 1 миллиарда пользователей соревнуются за привлечение внимания аудитории, используя различные уловки. Вы можете себе представить это число?

Некоторые категории людей создают каналы на YouTube для получения дохода, другие используют его для развлечения, но возникает дилемма: почему одни каналы чрезвычайно популярны и у них миллионы подписчиков, а другие едва посещают 100 человек? Ответ довольно прост:

1) Разница заключается в контенте, который пользователи YouTube предоставляют пользователям. 2) Разница в дизайне канала.

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

Наша команда Vectr любит путешествовать, поэтому созданное нами фоновое изображение YouTube очень точно описывает нас. Итак, первый вывод: убедитесь, что фоновое изображение полностью передает атмосферу вашего канала. Итак, начнем!

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

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

Unplash

Pexels

Когда изображение импортировано, вы можете изменить его размер и вырезать двойным щелчком мыши. и подвижные опорные точки.

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

Поздравляем! С изображениями покончено! Теперь пришло время добавить текст, который будет описывать канал. Для этого выберите Text и введите название канала или что вам нужно. Мы должны следить за тем, чтобы цвет текста и самой картинки были гармоничны. Перейдите в раздел Background и выберите Eyedropper. С помощью лупы рядом с мышью найдите цвет, который вы хотите установить, затем просто нажмите, чтобы установить. Круто, правда?

Кстати, мы используем 9Шрифт 0013 Alex Brush на случай, если он вам понравится.

Давайте добавим рамку, которая сделает ваш текст более заметным и добавит оригинальности вашему изображению. Выберите Pen tool на левой панели инструментов и создайте рамку. Включите Grid или Snapping для точных движений.

Дизайн почти готов! Осталось всего несколько шагов. Мы должны добавить социальные сети к нашему изображению. Выберите форму прямоугольника на левой панели инструментов и создайте фон для логотипов социальных сетей (редактируйте его по своему усмотрению с помощью инструментов на правой панели инструментов). Наконец, загрузите логотипы и разместите их рядом друг с другом.

Вот оно! Наслаждайтесь полным фоновым изображением YouTube 🙂

Попробуйте Vectr сами здесь!

Оставайтесь с Vectr: следите за нами на Facebook и Twitter !

Если вы хотите прочитать следующие статьи на Medium от команды Vectr, подпишитесь на нас здесь и лайкните пост ниже!

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

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

• Часть 1. Самый простой способ сделать фоновое изображение для YouTube
• Часть 2. Как сделать фон для YouTube с помощью Photoshop
• Часть 3. Как сделать фон YouTube на компьютере Mac
• Часть 4. Можно ли сделать фон YouTube с помощью мобильного приложения

Часть 1. Самый простой способ сделать фоновое изображение для YouTube

Wondershare Fotophire Editing Toolkit считается пакетом для многих, который предоставляет пользователям все необходимые инструменты и опции для редактирования изображений в яркой манере. Фон изображений может быть разработан с совершенством и легкостью, придавая профессиональный вид, который предоставляется пользователям программным обеспечением. Эти изображения можно совместить с совершенством, чтобы привлечь внимание каждого зрителя на платформе YouTube. Варианты настройки просты в использовании и могут быть сформулированы в соответствии с желанием каждого пользователя. Создание прозрачного фона вместе с добавлением цветов доставляет удовольствие всем пользователям по всему миру благодаря встроенной простоте программного обеспечения.

5 ключевых особенностей Fotophire Editing Toolkit

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

Создайте свой собственный фон для YouTube с помощью набора инструментов для редактирования Fotophire

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

Шаг 1: Первым шагом является запуск программного обеспечения Fotophire Editing Toolkit, а затем пользователю необходимо нажать на опцию Photo Cutter.

Шаг 2: После того, как вы нажмете на опцию «Фоторезка», откроется окно с несколькими опциями, из которых изображение, которое нужно отредактировать, можно загрузить на платформу.

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

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

Шаг 4: Ниже показано изображение, которое мы создали с помощью Fotophire. Теперь это изображение можно использовать на YouTube.

Часть 2. Как сделать фон для YouTube с помощью Photoshop

Photoshop — очень распространенный инструмент, используемый для создания привлекательного и эффектного фонового изображения YouTube. Если вы спешите создать фоновое изображение для YouTube, вы можете положиться на это программное обеспечение Photoshop. Photoshop совместим с различными операционными системами, такими как Windows и Mac, что делает его известным редактором растровой графики. Создание фонового изображения YouTube с помощью Photoshop может быть простым процессом, если вы ознакомитесь со следующим руководством.

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

Шаг 2: Слой появляется на экране после выбора кнопки OK на экране. Изображение, представленное ниже, ясно описывает это.

Шаг 3: Вставка изображения на следующем шаге, где открывается окно для выбора изображения по вашему выбору.

Шаг 4: Изображение можно настроить, просто перетащив его и установив нужный размер. Нажатие на курсоры в каждом углу позволяет удерживать и перетаскивать его в пропорции.

Шаг 5: Вы можете добавить текст по желанию, выбрав инструмент «Текст» в меню.

Шаг 6: Сохраните файл, используя опцию «Сохранить» или «Сохранить как» на вкладке «Файл».

Часть 3. Как сделать фон YouTube на компьютере Mac

В операционной системе Mac есть предустановленное приложение для создания фона Youtube. AppleWorks — это приложение, которое позволяет пользователям создавать продуктивные проекты. Приложение доступно в системах Mac OS X и Mac OS 9. Также можно зависеть от программы страниц, которая присутствует в приложении iWorks любого компьютера более новой версии.

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

Шаг 2: Затем нажмите на файл и выберите настройку страницы. Это помогает настроить ориентацию и выравнивание изображения.

Шаг 3: Вам нужно заменить графику, установленную по умолчанию, а затем нажать кнопку «Вставить» в меню «Файл». Откроется вкладка изображений, и вы можете перетащить желаемое изображение в раздел, чтобы создать фон.

Шаг 4: Контент можно добавить, щелкнув параметр текста. Размер, стиль и шрифт, а также цвет текста можно выбрать в соответствии с параметрами, доступными на вкладке «Формат». Параметры цвета можно выбрать, используя цветовую палитру, палитру градиента, палитру обоев, палитру стрелок и параметр палитры узоров, щелкнув форматирование заливки.

Шаг 5: Сохраните файл в любом желаемом формате, нажав кнопку «Сохранить» в меню «Файл».

Часть 4: Можно ли сделать фон YouTube с помощью мобильного приложения

Очевидно, что создать привлекательный фон для YouTube можно с помощью мобильного приложения. Thumbnail Maker & Banner Maker поможет вам сделать любое изображение по вашему выбору в качестве фона вашего канала Youtube. Это простое приложение предлагает вам в основном все типы параметров редактирования, такие как изменение фона, добавление наклеек, новый фон и многое другое. В приложении доступно более 100 бесплатных фонов.

Шаг 1: Вам нужно нажать на значок приложения после его установки на мобильный телефон Android. Теперь выберите свой любимый фон из списка.

Шаг 2: На следующем экране вы должны отрегулировать размер вашего нового фона, обрезав изображение в соответствии с вашим каналом YouTube.

Шаг 3: Теперь вы будете перенаправлены на экран опций. В нижнем меню интерфейса нажмите на любой значок и выберите его в качестве фона изображения YouTube. Нажмите на значки сейчас.

Шаг 4: Теперь вы можете настроить значок, используя синюю линию вокруг добавленного значка. Таким образом, выберите другие параметры в нижнем меню. Как только все будет готово, сохраните изображение на своем мобильном телефоне и загрузите его на свой канал YouTube, чтобы использовать в качестве фона YouTube.

Заключение:

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