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