26.2.10

Как показать видео от YouTube НАД катом от Blogger'а..

28 comments

Здравствуйте! Не знаю чья здесь вина кода для вставки, который мы получаем от YouTube.com или встроенных расширяемых сообщений от Blogger'а, но как заметил Мирослав: Если мы даже расположили видео с YouTube НАД катом, видео мы увидим только на странице самого поста.

В этой статье я опубликовала два видео (извиняюсь, если у кого на Михаила Боярского аллергия - подхватила первое, что было под рукой) НАД катом (т.е. до ссылки читать далее). Если вы сейчас находитесь на странице поста, то чтобы увидеть эффект перейдите, пожалуйста, на страницу постов за февраль 2010

И вот первое вставленное над катом видео мы (на странице архива) не видим, зато второе видео мы не только видим, но и можем посмотреть ;)

Видео №1


Видео №2


Теперь под катом можно посмотреть объяснение.



Про YouTube давно известно, что код который они дают для вставки в блог не удовлетворяет стандартам XHTML 1.0 и возможно это стало причиной нелюбви Blogger'овского ката и встроенного видео от YouTube.

Так как по поводу встроенного ката от Blogger'а мы ничего сделать не можем (разве что использовать другие виды катов таких как: шапка невидимка или газетный стиль шаблона), зайдем со стороны внесения изменения в код предоставленный YouTube'ом для вставки в блог.

Хак я нашла в блоге Шведская мебель (который не имеет абсолютно ничего общего с мебелью из Швеции): http://ikeapimp.blogspot.com/2010/01/embedding-in-blogger-with-jump-breaks.html

А теперь описание изменений, внесенных в стандартный YouTube'овский код для вставки чтобы видео было видно "над катом" на любой странице, а не только на странице самого поста.

Вот такой код поставляет нам YouTube:

<object width="500" height="405"><param name="movie" value="http://www.youtube.com/v/tWruDePlABI&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/tWruDePlABI&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object>

А вот как мы его легко поменяли:

<object data="http://www.youtube.com/v/tWruDePlABI" type="application/x-shockwave-flash" width="500" height="405"><param name="movie" value="http://www.youtube.com/v/tWruDePlABI&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/tWruDePlABI&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object>

Полужирным я выделила, то что мы добавили в код. Адрес видео.url в добавленном фрагменте я выделила синим, чтобы вам удобнее было увидеть, что он точно такой же как и в других частях кода (выделено зеленым) от http:// до & (амперсент не включаем).

А вот это вам напоследок хорошее видео (как раз чей код мы модифицировали):



Не забывайте,
что вы все ЗАМЕЧАТЕЛЬНЫЕ ЛЮДИ!

Любви вам и Счастья!


Света
Blogger: кошка.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

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

  1. Светлана, доброе утро!
    Для меня тема совсем актуальна. Впервые вставила видео с ютуб в блог 2 недели назад.
    Точно знаю, я - тормоз. Поэтому прошу прощения за качество вопроса.
    Мне бы другими словами фразу - "Если мы даже расположили видео с YouTube НАД катом, видео мы увидим только на странице самого поста."
    1. еще раз, что такое кат.
    2. а где нам нужно еще видео увидеть, кроме на странице самого поста?
    Думала, что пойму смысл по ходу сообщения, но так и не догнала :(

    ОтветитьУдалить
  2. Валя здравствуйте.

    Кат или по-другому расширяемые сообщения, это способ организации показа сообщений блога на главной странице, страницах архива и ярлыков, когда мы выбираем показывать не все сообщение целиком, а только его начальную часть (summary), после чего идет ссылка "Читать далее", которая ведет читателя на страницу поста.

    Кат - это и есть ссылка "Читать далее".

    Что до видео - вы обязательно сходите (как я и попросила в статье) по ссылке http://blogger4you.blogspot.com/2010_02_01_archive.html и вы увидите, что первое видео не показывается на странице архива, а второе показывается. А оба они расположены НАД катом (т.е. перед ссылкой "Читать далее").

    Больше информации про Расширяемые сообщения можно найти ткнув на одноименный ярлык под сообщением.

    Удачи во всем!
    Света

    ОтветитьУдалить
  3. Света, посмотрите пожалуйста мою вот эту страницу:
    http://anna973.blogspot.com/p/mery-produktov.html
    Что то с окошком для комментариев произошло и эта проблема только на этих новых страницах.
    Знакомo ли вам такое? Спасибо заранее.

    ОтветитьУдалить
  4. Света, всё в порядке, дня 4 не работало, а сегодня глянула, всё на своём месте. :))

    ОтветитьУдалить
  5. Ага, я тоже видео сегодня добавил а оно работает.

    ОтветитьУдалить
  6. Хотя, возможно если в Ютубе выбрать код с рамкой сверху то и код изменять не надо (это я так думаю), просто времени проверять сейчас нет.

    ОтветитьУдалить
  7. Света, а вы не знаете как колонку слева сделать?
    http://dotrb.blogspot.com/2010/01/kolonka-sleva-sprava.html
    Тут как то пробую и не выходит.
    Думаю что если вы статью напишите все будет понятнее.

    ОтветитьУдалить
  8. Здравствуйте, спасибо за полезный блог!!!
    Подскажите пожалуйста, как увеличить свою фотографию в панели автор блога? Еще я бы хотел убрать ссылку "просмотреть весь профиль". Подскажите, если возможно.
    Извините, что не в тему, не знаю где написать вопрос.

    ОтветитьУдалить
  9. Анна, здравствуйте!

    Я сама в тот день посмотрела и ничего не поняла. Здорово, что теперь работает!!!

    Похоже время лечит все! ;)

    Удачи во всем!
    Света

    ОтветитьУдалить
  10. Алексей, здравствуйте!

    Лучше всего не использовать Blogger'овский гаджет Профиль используйте гаджет Html/Javascript или текст и пишите туда, что хотите... хотите со ссылкой хотите без. С картинками может помочь этот http://blogger4you.blogspot.com/2009/01/blogger-inscript-your-picture.html и этот пост http://blogger4you.blogspot.com/2008/10/blogger-kartinki-dlya-fotohudozhnikov.html


    А вообще, надо бы мне по-хорошему написать маленький постик на эту тему.

    Удачи во всем!
    Света

    ОтветитьУдалить
  11. Нее, Мирослав, рамка здесь ни причем - на самом деле не так уж трудно подправит их код, главное не забывать про это (и где-то себе записать какие именно заклинания мы в него ДОЛЖНЫ вставить). Для других сервисов код придется править аналогично.

    > Света, а вы не знаете как колонку слева сделать? - Для себя мы делаем, может быть когда-нибудь дозрею описать процесс... Но главная беда, что во всех шаблонах авторы куски называют по-разном и поэтому очень трудно написать на эту тему что-то общее.

    Удачи вам!
    Света

    ОтветитьУдалить
  12. Здраствуйте, Света! Пришла к вам рассказать о новинке для блогера, а именно Карта блогера.
    Удачи всегда, Лина

    ОтветитьУдалить
  13. Здраствуйте, Светлана!Прочитал я ваш пост.И не понял почему у вас не работает видео над катом.У меня всё отлично работает например вот здесь в моём блоге.

    ОтветитьУдалить
  14. Здравствуйте, HouseMan!

    У вас в блоге совсем беда... Это снимок с экрана странички, на которую вы дали ссылку (там еще в двух верхних постах картинки почему-то не грузятся), а вот первый пост сам по себе: картинки там не появилось, но видео есть (потому что на странице поста нет ссылки "Читать далее"). Браузер FireFox 3.5.8

    Сегодня же, согласно этому хаку, правили одно видео у Кайла... там, вообще, забавно получилось в FireFox'e (не помню какая у Кайла версия) видео показывалось над катом, а в IE8 - нет. Теперь, естественно, везде показывается.

    И с картинками у вас странно, но думаю это временно и Blogger (а вы их загружали через Blogger) их найдет.

    Удачи во всем!

    И наверное видео вам все-таки лучше подправить..

    Света

    ОтветитьУдалить
  15. Ай-вай, шукрия за объяснение =) Очень-очень пригодилось - не мне, но подруге =)

    ОтветитьУдалить
  16. Вам спасибо, Оксана!

    Очень рада, что пост помог вашей подруге! Сама иногда к нему обращаюсь, чтобы правильным образом опубликовать видео над катом... ;)

    Удачи во всем!
    Света

    ОтветитьУдалить
  17. Здравствуйте!

    Есть вопрос по видео, но немного не в тему...извините..

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

    Но есть проблемка, которую хотелось бы решить.
    Все видео не имеет кадра из видео (скриншота или что-то подобное), просто черный экран.
    В итоге хотелось бы иметь эскиз (кадр) видео, как у ютуба.

    Спасибо за ответ.
    Александр.
    P.s. прошу прощения, если написал непонятно

    ОтветитьУдалить
  18. Светлана, здравствуйте! Я давний поклонник Вашего блога. Некоторые из Ваших советов применяю на практике. По Вашим рекомендациям сделал газетный стиль шаблона (http://blogger4you.blogspot.com/2009/08/blogger-read-more-for-laziest-bloggers.html) своего блога. А сейчас прошу Вашей помощи.
    Потребовалось поставить видео с YouTube на свой блог http://fishinform.blogspot.com. И тут попал. Видео не видно над катом, на основном посте все нормально. Может подскажете в чем причина?
    И еще ,с Вашего позволения, вопрос: "Можно ли вставить видео на статичные страницы сайта? Если можно, тогда как?" Пробовал - не получается!
    Благодарю!

    ОтветитьУдалить
  19. Александр (AlexBEST), здравствуйте!

    Проблема с "черным экраном" на видео загруженным через Blogger известна, на форуме Blogger'а она обсуждается с 19 февраля: Video posts do not show picture thumbnail. Black screen distracting reducing interest and hits

    Представители Google'а дважды там были обещали исправить ситуацию, но пока ничего не изменилось :(.

    Ждем-с,
    Света

    ОтветитьУдалить
  20. Юрий, здравствуйте!

    1) В своем тестовом блоге я добавила видео с YouTube на статическую страницу без всяких проблем. А еще можно добавить видео если редактировать статическуб страницу через Черновой (тестовый) вариант Панели инструментов. Туда вы попадете по адресу: http://draft.blogger.com/home

    2) С Газетным стилем шаблона, к сожалению я помочь не могу, там вся суть в унификации превьюшек (саммари), которые читатель видит на гл.странице, стр. архива и прочая. Если так важно видео над катом, можно воспользоваться Blogger'овским катом, про который здесь и пишется. При этом, конечно, придется удалить Газетный стиль шаблона.

    Удачи во всем!
    Света

    ОтветитьУдалить
  21. Светлана, здравствуйте! Весьма благодарен за ответ и рекомендации!
    Одно меня смущает, что Ваши рекомендации в Вашем посте, по моему мнению, диаметрально противоположны Вашему ответу мне.

    Ваш пост: "Про YouTube давно известно, что код который они дают для вставки в блог не удовлетворяет стандартам XHTML 1.0 и возможно это стало причиной нелюбви Blogger'овского ката и встроенного видео от YouTube.

    Так как по поводу встроенного ката от Blogger'а мы ничего сделать не можем (разве что использовать другие виды катов таких как: шапка невидимка или газетный стиль шаблона), зайдем со стороны внесения изменения в код предоставленный YouTube'ом для вставки в блог."

    Ваш ответ: "С Газетным стилем шаблона, к сожалению я помочь не могу, там вся суть в унификации превьюшек (саммари), которые читатель видит на гл.странице, стр. архива и прочая. Если так важно видео над катом, можно воспользоваться Blogger'овским катом, про который здесь и пишется. При этом, конечно, придется удалить Газетный стиль шаблона."
    Спасибо.

    ОтветитьУдалить
  22. Данную проблему я решил методом "сделаю сам".
    Написал код, который просто вставляется на страничку, после чего видео работает на всех браузерах, и на всех шаблонах. Без редактирования
    самой ссылки на видео.
    Другими словами, проблема больше не будет существовать.
    Пожалуста:
    http://www.terikon.com/2010/09/bloggercom.html

    ОтветитьУдалить
  23. Светлана, добрый день.
    Использую шаблон http://btemplates.com/2010/blogger-template-magnolia-marine/ мой блог
    http://artdock.blogspot.com/ не могу вставить в сообщение видео с YouTube
    В блоге http://600ccm.blogspot.com/ всё работает
    Где и что посмотреть, спасибо.

    ОтветитьУдалить
  24. А вот кто может подскажет - поставил видео над катом с vesti.ru
    и не показывает.
    Какие действия сделать?
    Спасибо

    ОтветитьУдалить
  25. Здравствуйте, Николай.

    С видео над катом от vesti.ru все оказалось не так уж страшно.

    Vesti.ru поставляет нам embed - код такого вида:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,29,0" id="flvplayer_videoHost" width="408" align="middle" height="356"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="movie" value="http://www.vesti.ru/i/flvplayer_videoHost.swf?vid=305993&amp;fbv=true&amp;isHome=false"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="devicefont" value="true"><param name="bgcolor" value="#000000"><param name="vid" value="305993"><embed src="http://www.vesti.ru/i/flvplayer_videoHost.swf?vid=305993&amp;fbv=true&amp;isHome=false" quality="high" devicefont="true" bgcolor="#000000" name="flvplayer" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="408" align="middle" height="356"></embed></object>

    Делаем два шага:
    1) удаляем кусок вида:
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

    2) на его место вставляем кусок вида
    data="http://www.vesti.ru/i/flvplayer_videoHost.swf?vid=305993"

    И того получаем код:

    <object data="http://www.vesti.ru/i/flvplayer_videoHost.swf?vid=305993" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,29,0" id="flvplayer_videoHost" width="408" align="middle" height="356"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="movie" value="http://www.vesti.ru/i/flvplayer_videoHost.swf?vid=305993&amp;fbv=true&amp;isHome=false"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="devicefont" value="true"><param name="bgcolor" value="#000000"><param name="vid" value="305993"><embed src="http://www.vesti.ru/i/flvplayer_videoHost.swf?vid=305993&amp;fbv=true&amp;isHome=false" quality="high" devicefont="true" bgcolor="#000000" name="flvplayer" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="408" align="middle" height="356"></embed></object>

    Полужирным выделила кусок где можно подсмотреть код для data.

    Если чего не получилось, спрашивайте.

    Удачи во всем!
    Света

    ОтветитьУдалить
  26. Извините, не сказала, что кусок вида

    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

    расположен в самом начале кода прямо после <object

    Света

    ОтветитьУдалить
  27. Светлана, здравствуйте! Подскажите пожалуйста, как в блог вставлять из youtube музыку без видео? Знаю что это возможно, только никак не пойму что в HTLM коде нужно убрать. Помогите)

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

Популярные сообщения