Как в качестве фона страницы на Blogger вставить видео с YouTube?

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

Как в качестве фона страницы на Blogger вставить видео с YouTube?

Демо

Встраивание видео с YouTube может оказаться полезным для пользователя, который продает и рекламирует какой-либо продукт, это будет действительно полезным в привлечении внимания и интереса клиентов. Сегодня в этой статье я покажу вам, как на Blogger вставить видео с YouTube в качестве фона страницы.

С одной стороны, результаты могут быть замечательными и продуктивным, но с другой стороны, есть три основных недостатка.

Видео не может быть приостановлено, соответственно, если на вашем видео будет контекстная реклама Google AdSense, вы не сможете с этим ничего поделать. Это может замедлить вашего блога, поэтому перед добавлением убедитесь, что вы используете его для серьезной нужды.

Прежде чем внедрять видео, убедитесь, что ширина вашего сайта не является довольно широкой. Максимальный размер виджета не должно превышать 700 пикселей, так чтобы пользователи смогли насладиться воспроизведенным видео на заднем фоне. Для дополнительных модификаций, вы можете сделать свой ??сайт немного прозрачным, чтобы обеспечить более четкое воспроизведение видео.

Как вставить видео с YouTube в качестве фона в Blogger:

Первое, что вам нужно сделать, это войти на сервис Blogger.com. После входа в систему выберите блог, на котором вы хотите установить YouTube видео. Теперь перейдите в Шаблон >> Изменить HTML >> Поиск (Ctrl+F) тега </head> и только выше этого тега вставьте следующий код.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';
jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);
jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;
var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';
jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>

После вставки выше представленного кода, нужно опять в шаблоне поискать открытый тег <body> и чуть ниже него добавить небольшой фрагмент кода. Однако, если вы не смогли найти этот тег, то попробуйте поискать <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> или фрагмент кода аналогичный ему.

<div id='wrapper-video'>

Итак, мы добавили код Open ID DIV, теперь его надо закрыть должным образом в противном случае в шаблоне будет всплывать ошибка. Теперь нам надо найти закрывающий тег </body> и прямо над ним вставить этот код.

</div> 

Важно: Не забудьте в самом первом коде заменить 61BLn00AN_w  ID на ID видео с YouTube, ID это символы, которые появляются в конце URL-адреса. Чтобы понять, посмотрите скриншот ниже. Как только все будет сделано, сохраните шаблон.

YouTube ID

Поздравляю: Вы успешно добавили видео c YouTube на фон своего блога Blogger. Перейдите и просмотрите свой блог, все ли работает как надо. Надеюсь, что этот урок был не напрасным.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>