Доброго времени суток, друзья. Многие пользователи создают на платформе Blogger полноценные видеоблоги с очень интересным и грамотным оформлением. И чаще всего используется родной, предоставленный в редакторе сообщений. Но простой способ добавления видео скучновато смотрится на странице.
На самом деле существует и другие способы отображения видеоплеера в блог. Например, можно вставить ролик так, чтобы он открывался в новом окне при просмотре.
А сегодня хочу предложить вам ещё один вариант оформления видео на странице блога. Чтобы увидеть, как это будет выглядеть, скопируйте приведённый ниже код и установите его в этом редакторе для просмотра.
Для такого оформления просто копируйте код целиком, а строке отмеченной синим цветом вставьте идентификатор вашего видео. Как его узнать я подробно писала в статье видео Youtube как в телевизионном кадре для Блоггер.
При желании поиграйтесь со стилями. Можно менять цвет рамки, тени и прочее. Готовый код устанавливаем на странице сообщения в режиме HTML в нужном месте. Или в гаджет HTML/JavaScript.
Так можно вставлять ролики не только с Youtube канала, но и из социальных сетей .
Всем удачи и до встречи.

А сегодня хочу предложить вам ещё один вариант оформления видео на странице блога. Чтобы увидеть, как это будет выглядеть, скопируйте приведённый ниже код и установите его в этом редакторе для просмотра.
<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&theme=light&hd=1&showinfo=0" width="560"></iframe>
</div>
</div>
.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&theme=light&hd=1&showinfo=0" width="560"></iframe>
</div>
</div>
Для такого оформления просто копируйте код целиком, а строке отмеченной синим цветом вставьте идентификатор вашего видео. Как его узнать я подробно писала в статье видео Youtube как в телевизионном кадре для Блоггер.
При желании поиграйтесь со стилями. Можно менять цвет рамки, тени и прочее. Готовый код устанавливаем на странице сообщения в режиме HTML в нужном месте. Или в гаджет HTML/JavaScript.
Так можно вставлять ролики не только с Youtube канала, но и из социальных сетей .
Всем удачи и до встречи.
оформите подписку на новые шпаргалки
Интересно! Получается рамочка? Спасибо, Виктория!
ОтветитьУдалитьДа, Ирина. Получается в рамочке и ещё с эффектом объёма внизу.
УдалитьПоследнее время все чаще получаю видеоматериалы в блогах. А в рамочке, не в рамочке, по-моему, без разницы.
ОтветитьУдалитьСемён, это дело вкуса.
УдалитьСпасибо, Вика, украду )))
ОтветитьУдалитьМаксимилиан, если есть задумки - забирай. Кстати, можно и просто картинки вставлять подобным образом.
ОтветитьУдалитьСпасибо за интересную фишку. Я так поняла, что речь идет о вставке видео с Ютуба?
ОтветитьУдалитьКонкретно о ютубе. а так можно любое из соц. сетей. И простая картинка так же.
УдалитьСпасибо. Обязательно попробую
ОтветитьУдалитьАнна Викторовна, пользуйтесь если понравилось.
ОтветитьУдалить