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

09.09.2016

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


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

Итак, как вставить видео с YouTube в блог в качестве фона.

1. Найти подходящее видео на Ютуб. Мне понравилось с плывущими по небу облаками. (демо блога с фоном из видео Ютуб)


Нам нужно будет потом в строке поиска в браузере скопировать идентификатор видео.



    А пока оставляем Ютуб на соседней вкладке браузера.

2. Делаем резервную копию блога (обязательно).

! Совет: создайте новый блог на Blogger - точную копию работающего блога. Только в настройках блога (Основное -> Конфиденциальность) нужно отметить "нет" в пунктах Добавить блог в наши каталоги? и отображение в поисковых системах (в итоге блог будете видеть только Вы). 
  Загрузите в блог копию шаблона работающего блога.
  Сохранив резервную копию контента (Настройки -> Другое -> Контент), импортируйте все записи в новый блог.
  И все эксперименты сначала проводите на созданной копии Вашего блога. 

3. Приступаем к вставке видео-фона. В настройках блога в пункте Шаблон нажимаем Изменить HTML.

4. При помощи клавиш сочетание клавиш Ctrl+Е ищем тег  </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('
Wg9qzUsWcJE','wrapper-video');
});
//]]>
</script>


5. Не сохраняя шаблон, заменяем сразу идентификатор видео (см. скриншот в шаге № 1). Выделенный в коде кусочек замените на идентификатор Вашего видео (если впоследствии не понравится, как выглядит блог с этим видео, найдите другое видео и просто замените идентификатор).





6. И опять еще не сохраняем шаблон. Ищем в коде шаблона 
тег <Body>.

Если такой тег не удается найти, то в строке поиска вставляем и ищем:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Под этой строкой добавляем:

 <div id='wrapper-video'>





7. Ищем дальше тег </Body> и вставляем перед ним  тег </div>



8. Сейчас уже можно сохранить шаблон.

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

Кстати, при окончании времени продолжительности видео оно само начинает воспроизводиться сначала (проверяла).

И еще. Если Вы не хотите брать чужое видео с YouTube со звуком, то загрузите свое. Или создайте слайд-шоу без звука и сконвертируйте его в файл, подходящий для загрузки на Ютуб. Затем вставьте его в качестве фона блога

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

  1. Мария, очень интересно! Спасибо!

    ОтветитьУдалить
  2. Очень красивая музыка на блоге "Простые истины". Замечательный фон! Это ваш тестовый блог?

    ОтветитьУдалить
    Ответы
    1. Да, это мой блог, который я создавала после прочтения книг Уолша. Не хватает только времени на его развитие...

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
  3. Доброго вам дня, Я Гор... Было очень интересно хотел сам сделать. Пробовал ничего не вышло, когда перед < / Body > вставляю < / div >, < / Body > становится красного цвета и дает ошибку а сохранить изменение не возможно вот что появляется на верху страницы
    Как исправит эту проблему???

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Это связано с переходом платформы Blogger на защищенное соединение //htpps:
      Если появится красная надпись, то попробуйте сначала нажать "исправить". Если не заработает, тогда при появлении текста с ошибкой нажмите "отменить".

      Удалить
    2. Здравствуйте. Как пробую не получается, а я очень хочу такой видеофон в мой блог, что делаю дает ошибку... Не знаю что можно еще делать... Вот что пишется на верху:
      Ошибка при синтаксическом анализе X M L (строка 3438, столбец 3): The element type
      " body " must be terminated by the matching end-tag "< / body >". Скрыть оповещение

      Удалить
    3. Что-то в шаге 6 не так пошло, наверно. Нужно вставить ПОД тегом < body > код < div id='wrapper-video' >
      У Вас тег < body > есть в шаблоне блога?

      Удалить
    4. Этот комментарий был удален автором.

      Удалить
    5. Нет < body > не смог найти нашел < body expr:class='"loading" + data:blog.mobileClass' > и как Вы сказали я под этим кодом вставил < div id='wrapper-video' >, но все ровно не получается... и ошибка дает в шаге 7...

      Удалить
    6. А на другом блоге пробовали устанавливать фон из видео?

      Удалить
    7. нет, у меня другого блога нету я все на своем единственном пробую, зная так проблем могут быть большие но демо блога я не сделал для себя... А как поняать в чем проблема в 6 шаге...

      Удалить

Загляните и на другие страницы ^