красивое оформление видеоролика

Доброго времени суток, друзья. Многие пользователи создают на платформе Blogger полноценные видеоблоги с очень интересным и грамотным оформлением. И чаще всего используется  родной, предоставленный в редакторе сообщений. Но простой способ добавления видео скучновато смотрится на странице.

На самом деле существует и другие способы отображения видеоплеера в блог. Например, можно вставить ролик так, чтобы он открывался в новом окне при просмотре.



А сегодня хочу предложить вам ещё один вариант оформления видео на странице блога. Чтобы увидеть, как это будет выглядеть, скопируйте приведённый ниже код и установите его в этом редакторе для просмотра.

<style>
.post-body {
    position: relative;
    z-index: 1;
 }
.tbn_css_frame_wrap {
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
}
.tbn_css_frame_wrap_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 15px solid #CACACA;
}
.tbn_css_frame_wrap_inner iframe,
.tbn_css_frame_wrap_inner object,
.tbn_css_frame_wrap_inner embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
.bottomshadows
{
  position: relative;
}
.bottomshadows:before, .bottomshadows:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.bottomshadows:after
{
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 10px;
  left: auto;
}
@media all and (max-width: 400px) {
.tbn_css_frame_wrap_inner {
    border: 7px solid #CACACA !important;
}
.bottomshadows:before, .bottomshadows:after {
    bottom: 9px !important;
} }</style>

<br />
<div class="tbn_css_frame_wrap">
<div class="tbn_css_frame_wrap_inner bottomshadows">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/WDlwppv2Irc?=0&amp;theme=light&amp;hd=1&amp;showinfo=0" width="560"></iframe>
 </div>
</div>

Для такого оформления просто копируйте код целиком, а строке отмеченной синим цветом вставьте идентификатор вашего видео. Как его узнать я подробно писала в статье видео Youtube как в телевизионном кадре для Блоггер.

При желании поиграйтесь со стилями. Можно менять цвет рамки, тени и прочее. Готовый код устанавливаем на странице сообщения в режиме HTML в нужном месте. Или в гаджет HTML/JavaScript.
Так можно вставлять ролики не только с Youtube канала, но и из социальных сетей .

Всем удачи и до встречи.

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

введите пожалуйста свой адрес электронной почты :