Как сделать видео-фон на блог Blogger
Как добавить видео Youtube в качестве фона для блога Blogspot. Красиво смотрятся плывущие облака, фейерверк, вода, дождь на заднем плане блога Blogger. Сегодня мы научимся создавать такой фон с помощью jQuery. Недостатки такого фона:
- блог начинает весить в разы больше, что сильно влияет на его скорость загрузки,
- выбирайте видео без звука, так как его отключить невозможно.
Посмотрите, как выглядит такой видео-фон на демо-блоге: 
Как подключить фон-видео youtube:
- Найдите в шаблоне блога отрезок кода </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="https://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='"loading" + data:blog.mobileClass'>.
- Добавьте в тело (после <body>) код
<div id='wrapper-video'>
- Теперь находим код </body> и перед ним вставляем </div>
- Сделайте предосмотр и сохраните изменения.
В результате у вас получиться фон – плывущие облака. Как изменить фон на свое видео? В первом отрезке кода, который мы добавили в шаблон, есть выделенный красным код:
<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w' ,'wrapper-video');
});
//]]>
</script>
Откройте на Youtube видео, которое хотите видеть в качестве фона и скопируйте идентификатор видео (код ссылки, который выделен красным): https://www.youtube.com/watch?v=aqEVwBaRMuc 
Вот и все. Наслаждайтесь результатом!
Не работаэээ!!!
У меня же работает.. Значит сделали что-то не так.
И у меня не работает !!
Glory Tokarev, проверю код. Если найду ошибки - отпишусь в комментариях.
Спасибо за статью, но меня интересует, как сделать слайд фон, те фон где картинки меняются в по времени тд. Может поможете чем?) мой блог на Blogger
Создайте соайд-шоу, загрузите на youtube и используйте в качестве фона. Если проблема в создании слайд-шоу - помогу.
Спасибо) т.е. фишка фона из картинок именно в создании слайд-шоу? я думал там какие то фишки надо сделать с css или что еще страшнее php или html)
Sound & Art, возможно можно решить и с помощью кода, но мне проще создать видео слайдшоу
добрый день а у меня вопрос а как свое видео установить без сайта Youtube а то это реклама внизу как то не красиво выглядит
кажется нашел решения разрабатываю для joomla хочу попробовать изменить шаблон http://sockweb.ru/115-video-na-fone-saytajquery.html здесь можно вставить свое видео без реклам
Сразу заработало. Вот здесь http://banksekretov.blogspot.ru/ Автору респект и уважуха!
Aleksandr Isakov, я рада, что у вас получилось
Спасибо большое,а у меня все получилось!Ждем новые уроки!Удачи и творческих всем успехов,а еще хочу сказать,вернее добавить,что лучше всего все находить и делать через блокнот!
Еще раз хочу сказать сердечное спасибо и хотела бы добавить,я протестировала не один шаблон и некоторые не получились.Не все они подходят изменению,зависит от самого шаблона.Если он авторский,лично кем то создан,то увы,нужно брать простые блогерские шаблоны,пусть даже с некрасивым фоном(фон можно поменять)И тогда все получится:))ИМХО
Час добрый,прошу прощения,все установила,все отлично,но вот какая беда-у меня как я поняла ролик с видео окончился и получается просто черные мерцающий экран,как быть в такой ситуации?
ilona, да видео-фон работает преимущественно на стандартных шаблонах. В моем примере (по ссылке demo) видео длиться всего 46 секунд, но не завершается черным экраном. Посмотрите сами. Но, может быть дело в браузере..
Спасибо огромное,я нашла отличное видео,правда со звуком,отредактировала его в камтазии,удалила звук,рекламы конечно не было,продлила его еще на немного и сейчас все отлично работает,правда в начале немного появляется черный фон а потом видео,и при переходе на другую страницу тоже,но думаю не беда,но настолько красивый блог стал,еще и слайды поставила,жаль что со звуком нельзя,кстати,а почему нельзя?Не тестировали со звуком?:))
Здравствуйте, вроде все получилось, но вместо видео отображает превьюшку для него с кнопкой плей!
Мария и Вероника, а фон - плывущие облака у вас получился вначале вставки кода?