Этот виджет будет полезным для тех сайтов у которых основное полотно контента более сдержанное, то есть не широкоформатное. Поскольку таких сайтов в сети очень много, то наверняка многим из вас виджет пригодится. Демо.
Почему лучше отображать видео в всплывающем окне?
Как я уже говорил, у большинства веб-ресурсов нет возможности отображать видео ролики в довольно широком формате, из-за особенностей настройки ширины полотна. Если видео такое, в котором нужно разглядеть важные элементы или шаги с определенными настройками, тогда посетитель просто напросто кликнет по значку youtube и продолжит просмотр видео уже на ютюбе. А ваш сайт при этом скорее всего закроет.Чтобы избежать подобного я рекомендую выводить видео в сплывающем окне, благодаря чему сохраняется возможность отобразить видео в более широком формате и при этом появляется больше шансов на то, что пользователь не перейдет на ютюб и останется на вашем веб-ресурсе.
Само всплывающее окно настроено на адаптивный дизайн, по-этому оно будет отображать видео в оптимальном размере для любого устройства. Кроме этого вам нужно убедиться, что ваш шаблон поддерживает адаптивный дизайн для видео. Узнать это вы можете открыв страницу своего сайта с видео и свернуть браузер в окно постепенно уменьшая его размеры, понаблюдайте, что при этом происходит с видео, его размер остается таким же или меняется в соответствии с размером окна вашего браузера.
Пример адаптивного дизайна видео при свернутом браузере:
Как это работает?
После установки CSS кода вам нужно будет при добавлении видео ролика вставлять соответствующий HTML код в редакторе постов. При этом всплывающее окно с видео youtube можно будет открывать с помощью ссылки, кнопки или картинки. В каждом посту вы сможете добавлять по одному всплывающему окну. То есть добавление того же кода с другим видео все равно будет открывать окно с тем видео, которое идет первым. Изменить это можно, но услуга платная, если нужно пишите через контакты.Плюсы виджета
В отличии от других виджетов и плагинов позволяющих добавлять на сайт всплывающее окно, этот виджет создан только на СSS из-за этого он более легкий, что не повлияет на скорость загрузки страниц сайта.Минусы виджета
При закрытии всплывающего окна видео продолжает воспроизводиться. Впрочем такой минус встречается у всех подобных виджетов, не только в нашем.Установка для Blogger
1.) Откройте раздел "Тема" найдите строку:]]></b:skin> после нее вставьте код:<style>
.modalDialog1 { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.6); z-index: 99999; opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; pointer-events: none; } .modalDialog1:target { opacity:1; pointer-events: auto; } .modalDialog1:target > div { margin: 8% auto;border-radius:5px; } .modalDialog1 > div {webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; width: 100%; position: relative; margin: 0 auto; background: #; max-width: 1000px; } h2.signup { background:#00aa9f; border-bottom: 1px solid #008d84; font-weight: normal; text-align:center; padding: 10px; color:#fff; font-size: 18px; } .close { color: #ef3d05 !important; position: absolute; top: 1px; right: 1px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 16px; margin-right: -10px; } .close:hover { text-decoration:none; } .close:hover { color:#555; }
@media (max-width:600px){
.modalDialog1:target > div { width: 90%; padding: 0px; }
.newsletter-sv .newsletter-input-sv { width: 90%!important}
.newsletter-sv .newsletter-button-sv { height: 40px; font-size: 14px; padding: 5px 10px; color: #fff; text-align: center; background: #333; border: 1px solid #333; cursor: pointer; margin-top: -10px!important; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin: 0px auto; display: block !important;float:none!important;}
}
.fa-remove:before, .fa-close:before, .fa-times:before {color: #c11616;}
.newsletter-sv {.newsletter-sv { background: #fff; width: 100%; margin: 0; padding: 20px; border-radius: 5px; margin-left: 0px; }}
.newsletter-sv h3 {color:#555; font-family: 'Maven Pro', sans-serif; font-size: 24px; font-weight: normal; text-align:center; margin-bottom: 10px;}
.newsletter-sv p {font-size: 14px; color:#555; line-height: 20px; font-family: 'Maven Pro', sans-serif;}
.newsletter-sv .newsletter-input-sv {border: 0; padding: 5px 10px; width: 360px; float:left; height: 40px; color:#555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sv .newsletter-sm-bot{background:#c11616 url(http://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/s1600/bg.png) no-repeat; padding: 20px; margin: 0 -20px -20px; height: 50px;}
.newsletter-sv .newsletter-button-sv {float:right; height: 40px; display:inline-block; font-size: 14px; padding: 5px 10px; position: relative;color: #fff;text-align: center; background:#333;border: 1px solid #333;cursor: pointer; margin-top: 5px;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
</style>2.) Сохраняете тему.
3.) В разделе Сообщения создаете новый пост. Здесь переходите на вкладку HTML и добавляете следующий код:
<a class='btn down anima' href='#signup1'>Смотреть видео </a>
<div class='modalDialog1' id='signup1'>
<div>
<a class='close' href='#close' title='Close'>х</a>
<br />
<div class="signup1-container">
<br />
<div class="newsletter-sv">
<br />
<iframe allowfullscreen="" frameborder="0" height="600" src="https://www.youtube.com/embed/E2fXgdwBr-w" width="1000"></iframe>
</div></div></div></div></div>4.)Публикуете сообщение.
Важно после того, как вы вставите этот код в сообщение, не переходите на вкладку "Создать" иначе система автоматически сменит нужные ссылки на свои и всплывающее окно с видео не откроется, вместо него откроется панель управления.
Установка для WordPress
1.) Смотрим первый пункт из установки в Blogger, копируете CSS код. Идем в панель управления, Внешний вид - Настроить, здесь открываем вкладку "Дополнительные CSS", в появившемся окне вставляете код, жмете кнопку "Сохранить и опубликовать"2.) Теперь копируем HTML код из третьего пункта установки в Blogger. Открываем раздел Записи, Добавить новую - в редакторе во вкладке "Текст" в нужном месте вставляете код и публикуете запись.
Разбираем код виджета
В HTML коде:Строка выделенная темно-зеленым цветом отображает ссылку "Смотреть видео", чтобы добавить вместо ссылки картинку смените эту строку на следующею:
<a href='#signup1'> <img src=http://img.youtube.com/vi/E2fXgdwBr-w/0.jpg width="500px" alt="Описание для картинки"/> </a>В ней красным вделен ID номер видео, смените его на номер своего видео. Или замените ссылку какртинки на свою:
http ... jpgwidth - ширина картинки - если нужно меняетеalt - описание картинки - так же при необходимости можно сменитьСтрока выделенная оранжевым это код видео, вместо него вставьте код своего видео.