2013-10-16

Textual description of firstImageUrl

Как сделать видео-фон на блог Blogger

Как сделать видео-фон на блог Blogger

Как добавить видео Youtube в качестве фона для блога Blogspot.

Красиво смотрятся плывущие облака, фейерверк, вода, дождь на заднем плане блога Blogger. Сегодня мы научимся создавать такой фон с помощью jQuery.

Недостатки такого фона:

  • блог начинает весить в разы больше, что сильно влияет на его скорость загрузки,
  • выбирайте видео без звука, так как его отключить невозможно.

Посмотрите, как выглядит такой видео-фон на демо-блоге:

Как подключить фон-видео youtube:

  1. Найдите в шаблоне блога отрезок кода </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>

  2. Находим в шаблоне код <body>. Если вы не нашли в вашем шаблоне этот код, то ищите  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.
  3. Добавьте в тело (после <body>) код
    <div id='wrapper-video'>
  4. Теперь находим код </body> и перед ним вставляем </div>
  5. Сделайте предосмотр и сохраните изменения.

В результате у вас получиться фон – плывущие облака.

Как изменить фон на свое видео?

В первом отрезке кода, который мы добавили в шаблон, есть выделенный красным код:

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

Откройте на Youtube видео, которое хотите видеть в качестве фона и скопируйте идентификатор видео (код ссылки, который выделен красным):

http://www.youtube.com/watch?v=aqEVwBaRMuc

youtube-video-for-blogger-background

Вот и все. Наслаждайтесь результатом!

19 комментариев :

Анонимный комментирует...

Не работаэээ!!!

Mycrib комментирует...

У меня же работает.. Значит сделали что-то не так.

Glory Tokarev комментирует...

И у меня не работает !!

Mycrib комментирует...

Glory Tokarev, проверю код. Если найду ошибки - отпишусь в комментариях.

Sound & Art комментирует...

Спасибо за статью, но меня интересует, как сделать слайд фон, те фон где картинки меняются в по времени тд. Может поможете чем?) мой блог на Blogger

Mycrib комментирует...

Создайте соайд-шоу, загрузите на youtube и используйте в качестве фона. Если проблема в создании слайд-шоу - помогу.

Sound & Art комментирует...

Спасибо) т.е. фишка фона из картинок именно в создании слайд-шоу? я думал там какие то фишки надо сделать с css или что еще страшнее php или html)

Mycrib комментирует...

Sound & Art, возможно можно решить и с помощью кода, но мне проще создать видео слайдшоу

олег комментирует...

добрый день а у меня вопрос а как свое видео установить без сайта Youtube а то это реклама внизу как то не красиво выглядит

олег комментирует...

кажется нашел решения разрабатываю для joomla хочу попробовать изменить шаблон http://sockweb.ru/115-video-na-fone-saytajquery.html здесь можно вставить свое видео без реклам

Aleksandr Isakov комментирует...

Сразу заработало. Вот здесь http://banksekretov.blogspot.ru/ Автору респект и уважуха!

Иванова Наталья комментирует...

Aleksandr Isakov, я рада, что у вас получилось

ilona naumenko комментирует...

Спасибо большое,а у меня все получилось!Ждем новые уроки!Удачи и творческих всем успехов,а еще хочу сказать,вернее добавить,что лучше всего все находить и делать через блокнот!

ilona naumenko комментирует...

Еще раз хочу сказать сердечное спасибо и хотела бы добавить,я протестировала не один шаблон и некоторые не получились.Не все они подходят изменению,зависит от самого шаблона.Если он авторский,лично кем то создан,то увы,нужно брать простые блогерские шаблоны,пусть даже с некрасивым фоном(фон можно поменять)И тогда все получится:))ИМХО

ilona naumenko комментирует...

Час добрый,прошу прощения,все установила,все отлично,но вот какая беда-у меня как я поняла ролик с видео окончился и получается просто черные мерцающий экран,как быть в такой ситуации?

Иванова Наталья комментирует...

ilona, да видео-фон работает преимущественно на стандартных шаблонах. В моем примере (по ссылке demo) видео длиться всего 46 секунд, но не завершается черным экраном. Посмотрите сами. Но, может быть дело в браузере..

ilona naumenko комментирует...

Спасибо огромное,я нашла отличное видео,правда со звуком,отредактировала его в камтазии,удалила звук,рекламы конечно не было,продлила его еще на немного и сейчас все отлично работает,правда в начале немного появляется черный фон а потом видео,и при переходе на другую страницу тоже,но думаю не беда,но настолько красивый блог стал,еще и слайды поставила,жаль что со звуком нельзя,кстати,а почему нельзя?Не тестировали со звуком?:))

Мария и Вероника комментирует...

Здравствуйте, вроде все получилось, но вместо видео отображает превьюшку для него с кнопкой плей!

Иванова Наталья комментирует...

Мария и Вероника, а фон - плывущие облака у вас получился вначале вставки кода?

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности