Всплывающее окно видео youtube на CSS

Всплывающее окно видео youtube
Приветствую друзья. Сегодня я подготовил для вас небольшой, простенький виджет с помощью которого вы сможете выводить видео на своих сайтах и блогах из Youtube, Вконтакте, Vimeo и других медиа сетей в отдельном всплывающем окне.

Этот виджет будет полезным для тех сайтов у которых основное полотно контента более сдержанное, то есть не широкоформатное. Поскольку таких сайтов в сети очень много, то наверняка многим из вас виджет пригодится. Демо.

Почему лучше отображать видео в всплывающем окне?

Как я уже говорил, у большинства веб-ресурсов нет возможности отображать видео ролики в довольно широком формате, из-за особенностей настройки ширины полотна. Если видео такое, в котором нужно разглядеть важные элементы или шаги с определенными настройками, тогда посетитель просто напросто кликнет по значку 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 &gt; div { margin: 8% auto;border-radius:5px; } .modalDialog1 &gt; 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 &gt; 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: &#39;Maven Pro&#39;, 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: &#39;Maven Pro&#39;, 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 ... jpg

width - ширина картинки - если нужно меняете
alt - описание картинки - так же при необходимости можно сменить

Строка выделенная оранжевым это код видео, вместо него вставьте код своего видео. 


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Всплывающее окно видео youtube на CSS
Всплывающее окно видео youtube на CSS
Виджет, плагин для установки на сайт вплывающего окна видео с youtube, вконтакте и других сетей.
https://1.bp.blogspot.com/-PnDzZlig4KE/WOuTQetjuUI/AAAAAAAAkXk/wH5aektzIbskXmsXIhjwcuAwJq3O6pJgwCLcB/s640/%25D0%25B2%25D1%2581%25D0%25BF%25D0%25BB%25D1%258B%25D0%25B2%25D0%25B0%25D1%258E%25D1%2589%25D0%25B5%25D0%25B5%2B%25D0%25BE%25D0%25BA%25D0%25BD%25D0%25BE%2B%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B5%25D0%25BE%2Byoutube-min.jpg
https://1.bp.blogspot.com/-PnDzZlig4KE/WOuTQetjuUI/AAAAAAAAkXk/wH5aektzIbskXmsXIhjwcuAwJq3O6pJgwCLcB/s72-c/%25D0%25B2%25D1%2581%25D0%25BF%25D0%25BB%25D1%258B%25D0%25B2%25D0%25B0%25D1%258E%25D1%2589%25D0%25B5%25D0%25B5%2B%25D0%25BE%25D0%25BA%25D0%25BD%25D0%25BE%2B%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B5%25D0%25BE%2Byoutube-min.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2017/04/vsplyvajushhee-okno-video-youtube.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2017/04/vsplyvajushhee-okno-video-youtube.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy