Как вставить видео на сайт из популярных социальных сетей чтобы оно гармонично вписалось в страницу, было адаптивным и удобно смотрелось на различных устройствах. Особенности добавления видео на сайт с компьютера.
Всех приветствую!
Видео на сайте и его главные задачи.
И сразу начнем с главного. Видео, размещенное на страницах сайта, решает две основные задачи.
Поведенческий фактор – задержка пользователей на страницах (важно для SEO). В результате понижается показатель отказов в статистике и как следствие, повышение в рейтинге поисковых систем.
Для современных поисковых систем – один из важных моментов. Просматривая ролики непосредственно на страницах вашего сайта, пользователи тратят определенное количество времени для просмотра.
Этот показатель фиксируется в поисковиках, что в дальнейшем увеличит шансы в попадание в топ. Если, конечно, контент отвечает современным требованиям SEO.
Еще по теме: Что такое SEO
Так же не мало важным является доверие, экономия времени, исключает недопонимание (обучающие ролики). В тексте не всегда можно до конца что-то понять, а видеоконтент все расставит на свои места.
Как вставить видео на сайт с одноклассников
В каждом ролике есть иконка «поделиться» и к ней две возможности.
В виде ссылки, что чаще всего используется в социальных сетях и с помощью html-кода, что предпочтительней для блогов.
Можно указать нужный размер и при необходимости, автостарт. Копируем весь код и вставляем на сайт в режиме html-кода.
В любой cms есть редактор с подобным режимом. В вордпрессе, например, два редактора, классический и гутенберг.
Как вставить видео на сайт с вконтакте
По этому же принципу делается и в социальной сети вконтакте. При размещении видео из разных источников, соотношение сторон плеера может отличаться.
Размер видео можно изменить в ручном режиме, непосредственно в редакторе подправив нужные значения.
С youtube и vimeo все по аналогии, с небольшой разницей в кнопке «поделиться».
Как вставить видео на сайт с компьютера
Видео загружать на сайт можно точно так же как и изображения, но есть некоторые нюансы, которые необходимо учитывать.
Объем видео
Объем загружаемого видео может в несколько раз превышать объем изображения. Если картинка 1024х683 весит к примеру, 1 mb., то пятиминутный ролик может потянуть на 20 mb.
Поэтому на выбранном тарифе хостинга должен быть запас. Для таких целей лучше купить VPN (виртуальный сервер).
Способ загрузки
Для добавления медиафайлов лучше не использовать загрузчик движка (cms-системы). Это долго и не безопасно, к тому же нагружает сервер. Я бы рекомендовал FTP. Проще, быстрее и надежней.
Для хранения видеофайлов желательно оставить папку по умолчанию. В каждой cms-системе она своя. В этом случае, при добавлении видео через стандартный редактор, сам файл проще найти.
Если же создать другую папку для хранения, то придется прописывать каждый раз адрес видеофайла. Либо заказать решение проблемы на фрилансе, если нет альтернативы по умолчанию.
Как разместить видео на сайте без тега iframe
Данный тег, мягко говоря, не приветствуют поисковые системы. С помощью него добавляется любой кусок информации с одного ресурса, на другом, в виде встроенного блока.
Кроме того, iframe используют в различных вирусных программах, поэтому от него есть некоторый негатив. Но заменить его всегда можно на тег embed.
Как сделать видео адаптивным
Вся проблема вставки видео на сайт из социальных сетей – это адаптивность. При просмотре на мобильных устройствах соотношение сторон не соответствует размеру экрана.
Само видео хоть и не искажается, но добавляет ненужный черный фон, с помощью которого и наращивается высота экрана видео снизу и сверху.
Код для адаптивного видео из социальных сетей
<div class="thumb-wrap">Здесь код видео<div>Код для добавления в дополнительные стили
.thumb-wrap {
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
height: 0;
overflow: hidden;
}
.thumb-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 0;
outline-width: 0;
}Класс .thumb-wrap не обязательный, на его месте может быть другой придуманный вами.
Заключение
Теперь вы в курсе как вставить видео на сайт из разных социальных сетей, у вас есть код для того, чтобы сделать его адаптивным и вы узнали об особенностях хранения и воспроизведения видео со своего хостинга.
Желаю удачи!
Еще по теме: Как вставить видео в joomla без плагинов и кода
