Видео в публикация на Blogger

Здравейте приятели. Има няколко опции за вмъкване на видеоклипове от YouTube (и не само), в публикация на блогове от платформата Blogger. Има такава опция в панела на редактора на блога, върху която можете да кликнете, за да активирате тази функция. Днес ви предлагам още една опция - добавяне на видеоклип от YouTube като в телевизионен екран, така че да привлича повече потребители за гледането му.

1. Описание на кода
2. Как да го направим

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

Няма да използваме JavaScript и други тежки кодове, за да получим хубав ефект. Използвайки малки CSS и HTML кодове ние ще създадем видео дисплей, подобен на телевизор, който ще вградим на желаното от нас място в публикация. Ще имаме на страницата си ето това:

Вижте как изглежда  на живо.

Как да го направим

Намерете видеоклипа, който искате да публикувате. В долната му част има опция за споделяне. Кликнете върху нея и изберете следващата опция "вграждане". Появява се прозорец, в който ни се предлага кода за вграждане на видеото в публикацията. Копирайте и го сложете в блокнот.
Нуждаем се само от част от този код, от идентификатора на видеото. Моят код е примерно такъв.

<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/D2y3UOZ5MM4" width="560"></iframe>

И ние се нуждаем само от това, което е маркирано в червено.

А кодът на видеото вече е готов. Разместете го в публикацията, но в режим HTML.

<center>
<style>.television-base{background:url(http://i.imgur.com/VFlxiox.png) no-repeat top center;height:458px;width:578px;padding-top:38px;padding-left:12px;;margin-left:15px}</style>


<div class="television-base">
<iframe allowfullscreen="" frameborder="0" height="283" src="//www.youtube.com/embed/D2y3UOZ5MM4?feature=player_embedded" width="511"></iframe></div>
</center>

Първата част на кода е CSS код. Може да се наложи корекция в размерите и отстъпите. Променете следните стойности, ако видеоклипът не се показва правилно на страницата.

height: 458px; widht: 578px; padding-top: 38px; padding-left: 12px; margin-left: 15px

В него е изображението на телевизора във формат png с адрес: http://i.imgur.com/VFlxiox.png.

А във втория HTML код, освен идентификатора, маркиран в червено, не е нужно да променяте нищо. Резултатът може да се види вече в режим "Визуализация".

Така, без допълнителни усилия, вмъкваме видео в рамка на телевизор и то ще изглежда прекрасно.
Помислете, може би ще намерите и нещо друго за привлекателно вграждане на видео в публикация на Blogger. Тук, например, има уникална рамка за видео в публикация (това, което виждате по-долу е само екранна снимка).

Благодаря за вниманието, успех и чакам вашите коментари и предложения.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: