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

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



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

    Няма да използваме 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. Тук, например, има уникална рамка за видео в публикация (това, което виждате по-долу е само екранна снимка).


    Уникална рамка за видео


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

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

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

    BGtop


    OpenCloseComments

    4 Komentar

    • С. Динкова 7 януари 2018 г. в 7:15
      Здравейте, моля, обяснете ми защо не успявам да инсталирам видеото си по този начин. Къде бъркам прочетох и направих всичко както е описано.
    Cancel