Как вставить в Blogger видео из Youtube, Вк, Фейсбука

Если вам нужно добавить видео в блог на Blogger из медийной сети Youtube, тогда вы можете сделать это тремя простыми способами. Для Вконтакте, Facebook, Twitter и других подобных сетей способ всего один. Во всех случаях нам поможет редактор сообщений или страниц. Помимо этого вы так же можете вставлять видеоролики в боковые панели через раздел Дизайн, но об этом чуть позже.

Вставка видео из Youtube через копирование HTML видеоплеера

Для меня удобней всего разместить видеоролик из Ютуба, через копирование его HTML кода. Для этого проста кликните по видео правой кнопкой мышки и в появившемся списке выберите: Копировать HTML-код.
Ка вставить в Blogger видео из Youtube, Вк, Фейсбука
После откройте в блоге Сообщение, вверху, с правой стороны перейдите на вкладку HTML и разместите скопированный код в нужном месте.

Таким же способом можно добавлять видео из социальных сетей Facebook, Vkontakte и т.д.. Еще можно поискать иконку или кнопку поделиться и там так же будет возможность скопировать код плеера. По Фейсбуку и Твиттеру смотрите видео в конце статьи.

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

Вставка видео из Youtube через редактор сообщений

Для этого способа вам нужно открыть Сообщение, вверху кликнуть по иконке Вставить видеоролик, перейти на вкладку c Youtube и прописать в поисковой строке название видеоролика. Далее просто находите то, что искали, кликаете мышкой и жмете кнопку Выбрать.
вставка видео через редактор сообщений
Заметили там вкладку Загрузка? Все верно вы так же можете загружать видеоматериалы со своего компьютера, правда много не загрузите, места не хватит, помните у вас в запасе 15гб.

Добавление видео из Ютуб кнопкой поделиться

Так же очень простой способ. При этом сообщение блога создается автоматически и в заголовке подтягивает название из видео. Откройте в Ютуб нужную страницу, кликните по кнопке Поделиться, виберите значок Blogger. Перед вами появится мини-редактор. Сперва выберите блог на котором хотите разместить материал, затем можете подправить нужные параметры публикации, добавить текст и т.д.. Ну и собственно жмете кнопку Опубликовать сообщение.
Ютуб кнопка поделиться


Добавление видеоролика в Дизайне

Как я уже говорил выше, нужный видеоролик можно размещать не только в постах, но и в боковых панелях, футере, короче говоря в любом месте, где есть возможность добавления гаджетов и виджетов. Для этого копируем код плеера, переходим в раздел Дизайн - Добавить гаджет - HTML\Javascript, в появившемся окошке вставляем код и сохраняем гаджет.


Если вам было трудно ознакомиться с текстовой частью материала предлагаю просмотреть видео:


Ускоряем загрузку страниц блога оптимизируя видео

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

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen"height="480"width="900"></iframe>')})},5e3);
//]]>
</script> 
Параметр height это высота плеера
Параметр width это ширина плеера
Можете править их в соответствии с размерами ваших страниц.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/6CzLfSwJjg8">
</div>
</div>
</div>
Смените ссылку на ссылку своего видео.

Библиотеки Jquery (как видите код немного отличается от того который на видео, это не страшно и не спешите его ставить пока не проверите загружаются видео или нет после первых двух шагов).
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>

Переходим к просмотру видео:



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем