Этот виджет будет полезным для тех сайтов у которых основное полотно контента более сдержанное, то есть не широкоформатное. Поскольку таких сайтов в сети очень много, то наверняка многим из вас виджет пригодится. Демо.
Почему лучше отображать видео в всплывающем окне?
Как я уже говорил, у большинства веб-ресурсов нет возможности отображать видео ролики в довольно широком формате, из-за особенностей настройки ширины полотна. Если видео такое, в котором нужно разглядеть важные элементы или шаги с определенными настройками, тогда посетитель просто напросто кликнет по значку youtube и продолжит просмотр видео уже на ютюбе. А ваш сайт при этом скорее всего закроет.Чтобы избежать подобного я рекомендую выводить видео в сплывающем окне, благодаря чему сохраняется возможность отобразить видео в более широком формате и при этом появляется больше шансов на то, что пользователь не перейдет на ютюб и останется на вашем веб-ресурсе.
Само всплывающее окно настроено на адаптивный дизайн, по-этому оно будет отображать видео в оптимальном размере для любого устройства. Кроме этого вам нужно убедиться, что ваш шаблон поддерживает адаптивный дизайн для видео. Узнать это вы можете открыв страницу своего сайта с видео и свернуть браузер в окно постепенно уменьшая его размеры, понаблюдайте, что при этом происходит с видео, его размер остается таким же или меняется в соответствии с размером окна вашего браузера.
Пример адаптивного дизайна видео при свернутом браузере:
Как это работает?
После установки CSS кода вам нужно будет при добавлении видео ролика вставлять соответствующий HTML код в редакторе постов. При этом всплывающее окно с видео youtube можно будет открывать с помощью ссылки, кнопки или картинки. В каждом посту вы сможете добавлять по одному всплывающему окну. То есть добавление того же кода с другим видео все равно будет открывать окно с тем видео, которое идет первым. Изменить это можно, но услуга платная, если нужно пишите через контакты.Плюсы виджета
В отличии от других виджетов и плагинов позволяющих добавлять на сайт всплывающее окно, этот виджет создан только на СSS из-за этого он более легкий, что не повлияет на скорость загрузки страниц сайта.Минусы виджета
При закрытии всплывающего окна видео продолжает воспроизводиться. Впрочем такой минус встречается у всех подобных виджетов, не только в нашем.Установка для Blogger
1.) Откройте раздел "Тема" найдите строку:]]> после нее вставьте код:2.) Сохраняете тему.
3.) В разделе Сообщения создаете новый пост. Здесь переходите на вкладку HTML и добавляете следующий код:
Смотреть видео
4.)Публикуете сообщение.
Важно после того, как вы вставите этот код в сообщение, не переходите на вкладку "Создать" иначе система автоматически сменит нужные ссылки на свои и всплывающее окно с видео не откроется, вместо него откроется панель управления.
Установка для WordPress
1.) Смотрим первый пункт из установки в Blogger, копируете CSS код. Идем в панель управления, Внешний вид - Настроить, здесь открываем вкладку "Дополнительные CSS", в появившемся окне вставляете код, жмете кнопку "Сохранить и опубликовать"2.) Теперь копируем HTML код из третьего пункта установки в Blogger. Открываем раздел Записи, Добавить новую - в редакторе во вкладке "Текст" в нужном месте вставляете код и публикуете запись.
Разбираем код виджета
В HTML коде:Строка выделенная темно-зеленым цветом отображает ссылку "Смотреть видео", чтобы добавить вместо ссылки картинку смените эту строку на следующею:
E2fXgdwBr-w/0.jpg width="500px" alt="Описание для картинки"/> В ней красным вделен ID номер видео, смените его на номер своего видео. Или замените ссылку какртинки на свою:
http ... jpgwidth - ширина картинки - если нужно меняетеalt - описание картинки - так же при необходимости можно сменитьСтрока выделенная оранжевым это код видео, вместо него вставьте код своего видео.
Коммент.