Конечно, скорость загрузки страницы при этом немного снизится, но если Вы решили изменить фон на "видео-фон", то читайте ниже инструкцию, как это сделать для 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>.
Итак, как вставить видео с 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). Выделенный в коде кусочек замените на идентификатор Вашего видео (если впоследствии не понравится, как выглядит блог с этим видео, найдите другое видео и просто замените идентификатор).
тег <Body>.
Если такой тег не удается найти, то в строке поиска вставляем и ищем:
<body expr:class='"loading" + data:blog.mobileClass'>
Под этой строкой добавляем:
7. Ищем дальше тег </Body> и вставляем перед ним тег </div>
8. Сейчас уже можно сохранить шаблон.
При просмотре блога в браузере может сначала появиться черный фон, а потом подгрузиться видео. Если не заработало, попробуйте обновить страницу или нажать клавишу F5.
Кстати, при окончании времени продолжительности видео оно само начинает воспроизводиться сначала (проверяла).
И еще. Если Вы не хотите брать чужое видео с YouTube со звуком, то загрузите свое. Или создайте слайд-шоу без звука и сконвертируйте его в файл, подходящий для загрузки на Ютуб. Затем вставьте его в качестве фона блога.
<div id='wrapper-video'>
7. Ищем дальше тег </Body> и вставляем перед ним тег </div>
8. Сейчас уже можно сохранить шаблон.
При просмотре блога в браузере может сначала появиться черный фон, а потом подгрузиться видео. Если не заработало, попробуйте обновить страницу или нажать клавишу F5.
Кстати, при окончании времени продолжительности видео оно само начинает воспроизводиться сначала (проверяла).
И еще. Если Вы не хотите брать чужое видео с YouTube со звуком, то загрузите свое. Или создайте слайд-шоу без звука и сконвертируйте его в файл, подходящий для загрузки на Ютуб. Затем вставьте его в качестве фона блога.
Мария, очень интересно! Спасибо!
ОтветитьУдалитьОчень красивая музыка на блоге "Простые истины". Замечательный фон! Это ваш тестовый блог?
ОтветитьУдалитьДа, это мой блог, который я создавала после прочтения книг Уолша. Не хватает только времени на его развитие...
УдалитьЭтот комментарий был удален автором.
УдалитьДоброго вам дня, Я Гор... Было очень интересно хотел сам сделать. Пробовал ничего не вышло, когда перед < / Body > вставляю < / div >, < / Body > становится красного цвета и дает ошибку а сохранить изменение не возможно вот что появляется на верху страницы
ОтветитьУдалитьКак исправит эту проблему???
Здравствуйте. Это связано с переходом платформы Blogger на защищенное соединение //htpps:
УдалитьЕсли появится красная надпись, то попробуйте сначала нажать "исправить". Если не заработает, тогда при появлении текста с ошибкой нажмите "отменить".
Здравствуйте. Как пробую не получается, а я очень хочу такой видеофон в мой блог, что делаю дает ошибку... Не знаю что можно еще делать... Вот что пишется на верху:
УдалитьОшибка при синтаксическом анализе X M L (строка 3438, столбец 3): The element type
" body " must be terminated by the matching end-tag "< / body >". Скрыть оповещение
Что-то в шаге 6 не так пошло, наверно. Нужно вставить ПОД тегом < body > код < div id='wrapper-video' >
УдалитьУ Вас тег < body > есть в шаблоне блога?
Этот комментарий был удален автором.
УдалитьНет < body > не смог найти нашел < body expr:class='"loading" + data:blog.mobileClass' > и как Вы сказали я под этим кодом вставил < div id='wrapper-video' >, но все ровно не получается... и ошибка дает в шаге 7...
УдалитьА на другом блоге пробовали устанавливать фон из видео?
Удалитьнет, у меня другого блога нету я все на своем единственном пробую, зная так проблем могут быть большие но демо блога я не сделал для себя... А как поняать в чем проблема в 6 шаге...
УдалитьДа страшно мне за блог. Но думаю как нибудь попробую, Спасибо Мария,
ОтветитьУдалитьПойду книгу про HTML искать ... думаю найду