Видео 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


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

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

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

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

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

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

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

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

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

      Удалить
  6. Виктория, доброго времени суток. В самом телевизоре видео не отображается. Что могло быть не так?

    ОтветитьУдалить
  7. Лариса, где можно посмотреть. Скиньте мне код на почту через форму связи который вы вставляете.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск