Георгиевская ленточка

Как вставить видео с 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 со звуком, то загрузите свое. Или создайте слайд-шоу без звука и сконвертируйте его в файл, подходящий для загрузки на Ютуб. Затем вставьте его в качестве фона блога

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

  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 шаге...

      Удалить
  4. A very interesting article, A variety of apps will provide additional opportunities for the user and replace basic functionality, update your Android with the latest APPs, expand the utilities installed on your mobile,Messenger,WhatsApps, Antivirus, Games, Music, watch TV, Tools.
    A very good and interesting article, Browsing the internet looking for general culture information, I find CULTURAL BLOGS have Literary information, Books, novels, Latin American culture, Magazines.etc I recommend the page of the writer Manuel Sosa Madrid Writer of Black Novels and Stories that will make you think.

    ОтветитьУдалить

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