Видео YouTube как в телевизионном кадре BLOGGER

видео
Есть несколько вариантов вставки видеороликов из YouTube в блоги на платформе Blogger. Прямо в панели редактора, нажав на такую функцию вверху. Можно вставить и открыть видео в новом окне. Сегодня предлагаю вам ещё один вариант - добавление видео YouTube как в телевизионном кадре, чтобы оно привлекало больше пользователей для просмотра.



Мы не будем использовать javascript и другие тяжелые коды, чтобы получить красивый эффект. С помощью небольшого кода CSS и HTML создадим отображение ролика, как в телевизоре.

Посмотрите наглядно, как это выглядит. Да и танго просто замечательно исполнено.




Найдите видео, которое нужно опубликовать. Ниже есть опция поделиться. Нажимайте на неё и выбирайте в открывшемся окне встроить.

встроить видео


После этого появиться окно, где предложен код для вставки видео в пост. Скопируйте его пока в блокнот.

встроить видео

Нам из этого кода нужен всего лишь идентификатор видео. Мой код, примерно такого вида. И нужно только то, что отмечено красным.-

<iframe width="560" height="315" src="https://www.youtube.com/embed/WDlwppv2Irc" frameborder="0" allowfullscreen></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/WDlwppv2Irc?feature=player_embedded" width="511"></iframe></div>
</center>


В первом коде CSS возможно придётся поиграться с размерами и отступами. Меняйте значения если видео на странице отображается некорректно. Почитайте об отступах и полях.

height:458px;width:580px;padding-top:38px;padding-left:72px;;margin-left:30px

А во втором коде HTML кроме идентификатора ничего менять не надо. Результат можно видеть уже в режиме "Просмотр".

Вот так, без лишних усилий красиво вставили видеоролик в телевизеонную рамку. В первом коде это картинка самого телевизора в формате png с  адресом. http://i.imgur.com/VFlxiox.png.

Подумайте, может и что другое подберёте для этого. Вот, к примеру, взяла простую рамку в формате и, подогнав все размеры, отступы и поля получила что - то такое (это просто скриншот).

видео


Код для такой рамки.

<center>
<style>.television-base{background:url(http://i43.beon.ru/20/39/1823920/93/90140893/45355.png) no-repeat top center;height:458px;width:578px;padding-top:17px;padding-left:5px;;margin-left:5px}</style>

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


А в этом сообщениии узнайте, как встроить видео из социальных сетей.


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

Введите Ваш email


8 комментариев:

  1. Виктория, как здорово! Хочу попробовать! Хотя пока не совсем разобралась!

    ОтветитьУдалить
    Ответы
    1. Ирина, попробуй обязательно. Не думаю, что возникнут трудности. Вроде всё пошагово разобрала. единственное с отступами поиграться, наверное, придётся.

      Удалить
  2. Взяла на вооружение. Спасибо, Вика. Как-то надо собраться с мыслями и временем...

    ОтветитьУдалить
    Ответы
    1. Люба, бери. Попробуй пока просто этот же код что я дала с моим роликом. там и будет видно, подправлять что или нет.

      Удалить
  3. Такие рамочки хорошо смотрятся на открытках на блогере. Рамочки можно делать самим любые в фотошопе или находить в интернете, помещать их в гуглфото и брать оттуда url. Виктория, надо будет попробовать Ваш код, он вроде проще, чем я делала, вот например http://sdnempobedyi.blogspot.ru/

    ОтветитьУдалить
  4. Светлана, так рамочка у меня и есть из интернета . да, я видела вашу открытку. Код, что приведён здесь, лёгкий достаточно.

    ОтветитьУдалить
  5. классно смотрится. а я просто ссылкой размещаю

    ОтветитьУдалить
    Ответы
    1. Да, не плохо. Тут хоть как всё через iframe подгружается.

      Удалить

Пользовательский поиск
Foto Saya
My Photo