Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Модальный блок видео на CSS3

Модальный блок видео на CSS3

Наглядный пример того, как можно организовать просмотр в модальном блоке, исключительно средствами , без javascript и дополнительных изображений в оформлении.
За основу взял модальное окно на чистом CSS, кардинально ничего менять не стал, разве что видоизменил кнопку закрытия, эффект появления и фоновою заливку.

Для резинового макета модального блока использовал ширину в %. Видео поместил в встроенный div-контейнер, с параметрами обеспечивающими гарантированную адаптивность видеоплеера вставляемого через iframe, object, или embed.
 
Модальный видео блок на CSS

HTML

Фон затемнения представлен в виде отдельного контейнера <div class="overlay" id="video1"></div>, ели вдруг вам понадобится сделать так чтобы и слой затемнения закрывались по клику вне окна, используйте тег <a href="#" class="overlay" id="video1"></a>.
Для вызова модального видеоблока, так же как и в случае с любым модальным элементом, используем стандартную ссылку с уникальным адресом в атрибуте href, соответствующим идентификатору модального блока. При использовании на одной странице нескольких модальных блоков, просто не забывайте следить за соответствием этих значений, примерно так:
 

<a href="#video1">Смотреть Видео</a>

 
Для видео ВКонтакте, параметры ширины и высоты iframe обязательны, и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры width="auto" height="auto" в фрейм, или же используйте самые большие допустимые значения, видеоблок автоматом подстроится под размеры родительского контейнера.
 

<!-- Модальный блок -->
<div class="overlay" id="video1"></div>
    <div class="modal">
         <div class="video__title">
             Это просто заголовок и краткое описание видео
         </div>
         <div class="video" id="youtube">
              <iframe width="1280" height="720" src="http://www.youtube.com/embed/HDm94zrbXJA" frameborder="0" allowfullscreen></iframe>
         </div>
         <a href="" onclick="void(0)" class="close"></a>
    </div>
<!-- конец блока видео-->

CSS

Все стили вынесены в отдельный файл, можете подключить его к странице или же скопировав содержимое вставить в общую таблицу стилей вашего сайта. Комментарии в коде, помогут разобраться вам, что к чему и зачем))).

/** стили фона затемнения **/
.overlay {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 10000;
   visibility: hidden;
/* фон затемнения */
   background-color: rgba(0, 0, 0, 0.8);
   opacity: 0;
   position: fixed; /* фиксированное позиционирование */
/* трансформация прозрачности при открытии  */
   -webkit-transition: opacity .5s;
   -moz-transition: opacity .5s;
   -ms-transition: opacity .5s;
   -o-transition: opacity .5s;
   transition: opacity .5s;
}
/* активируем при клике */
.overlay:target {
   visibility: visible;
   opacity: 1;
}
/** стили модального блока */
.modal {
   top: 0;
   right: 0;
   left: 0;
   width: 50%;
   z-index: 10001;
/** полная прозрачность изначально */
   opacity: 0;
   display: block;
   visibility: hidden;
   position: absolute;
/* трансформация прозрачности при открытии  */
   -webkit-transition: opacity 500ms ease-in;
   -moz-transition: opacity 500ms ease-in;
   transition: opacity 500ms ease-in; 
   margin: 0 auto;
   padding: 24px;
   min-width: 320px;
   max-width: 1024px;
   width: 100%;
   border: 1px solid rgba(120,120,120,.7);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background: rgba(60, 63, 65, 0.9); 
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
   -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
   -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
   box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/* активируем при клике */
.overlay:target+.modal{
   top: 15%;
   visibility: visible;
   opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.modal {
    width: 95%;
  }
}
/* смарт */
@media only screen and (min-width: 459px) and (max-width: 767px) {
.modal {
    width:85%;  
  }
}
/* кнопка закрытия */
.close {
   position: absolute;
   width: 30px;
   height: 30px;
   right: 18px;
   top: 18px;
   z-index: 999999;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   line-height: 26px;
}
@media (max-width: 530px) {
.close {
   top: 6px;
  }
}
.close:after {
   content: 'X';
   display:block;
   width: 30px;
   height: 30px;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   border: 2px solid #fff;
   -moz-transition: all 0.6s;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
   -moz-transform: scale(0.85);
   -ms-transform: scale(0.85);
   -webkit-transform: scale(0.85);
   transform: scale(0.85);
}
 
.close:hover:after {
   transform: scale(1);
}
/* блок заголовка видео */
.video__title {
   height: auto;
   width: 70%;
   padding: 0px 5px 15px 5px;
   color: white;
   font: normal 16px/22px 'Open Sans', Calibri, Arial, sans-serif;
}
@media (max-width: 530px) {
.video__title {
   height: 38px;
   font-size: 12px;
   line-height: 18px;
  }
}
/* адаптивный блок видео */
.video { 
   position: relative; 
   padding-bottom: 56.25%; 
   height: 0; 
   overflow:hidden; 
} 
.video iframe, 
.video object, 
.video embed {
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%;
   height: 100%; 
}
/* -- */

При просмотре демо, попробуйте изменять размер окна браузера и обязательно включите видео. При закрытии модального блока, проигрывание видеоролика останавливается. Способ остановки видео совсем не «кошерный», просто использовал ссылку с пустым атрибутом href=""(вижу, как переворачивает небожителей с хабра), другого более действенного и валидного решения, без подключения js, на данный момент пока не нашёл.

Обновление 19.02.2016:

С подачи NeedHate(большое ему спасибо), дабы закрыть вопросы о прекращении воспроизведения видео, после закрытия модального окна(что конечно же логично), решил расписать предложенный им способ с подключением в работу jQuery.
Метод отлично срабатывает для встроенного видео с YouTube. В первую очередь, вам понадобится подключить библиотеку jQuery (если таковая у вас отсутствует), например, с сервиса Google Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Затем подключаете YouTube JavaScript Player API:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

С помощью API JavaScript, вы сможете управлять проигрывателем Chromeless Player и встроенным проигрывателем YouTube с помощью javaScript кода. Для нашего модального блока с встроенным видео, исполняемый js будет таким:

<script>
        var player;
        function onYouTubePlayerAPIReady() {
        player = new YT.Player('player');
        }
 
        $('#stop').click(function(){
        player.stopVideo()
        })
    </script>

Далее, фрейму(iframe) с видео, необходимо присвоить идентификатор, пусть это будет id="player". Кнопке закрытия модального окна, так же прописываем свой id:

<a href="#close" id="stop" title="Закрыть" class="close"></a>

При клике по кнопке с id="stop" будет вызвана функция player.stopVideo (), окно закроется и воспроизведение видео остановится.
В демо, данное решение можете лицезреть воочию, архив с исходниками оставил как есть.
Следует понимать, что для других видеосервисов и танцы будут другими))).

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

27 комментариев
  1. Вячеслав:

    Здравствуйте. Классные блоки. Подскажите, а как правильно их вставить в блог на Блоггер. Если можно поконкретнее, как для чайника. Спасибо.

    Ответить
    • driver:

      Здравствуйте, Вячеслав.

      В Блоггере выбираете «Шаблон» -> «Изменить HTML»

      Находите раздел <b:skin><![CDATA[ ... ]]></b:skin>

      Внутри этого раздела прописаны все стили вашего шаблона. Чтобы не потеряться в последующем, вставляете стили css модального бока в самый конец, перед ]]></b:skin>, сохраняете изменения.

      Затем при написании сообщения в режиме html, используете html-конструкцию модального блока с вашим видео и не забываете про ссылку активации модального окна с соответствующим id. Работа модального окна будет видна после публикации, в режиме черновика просмотр не срабатывает.

      Внести изменения в css шаблона можно ещё проще, не ковыряя hml. Достаточно выбрать «шаблон» -> «настроить» -> «дополнительно» -> «добавить css» , в открывшееся поле добавить стили мод.окна и нажать «применить к блогу»

      Следует помнить, что блок видео адаптивный с шириной width: 100%; и его размеры будут автоматом подстраиваться под родительский контейнер, если размеры видео-блока вас не устроят(будут меньше чем вы ожидали), измените значение ширины в селекторе .modal на больший например в 120%

      Удачи, надеюсь всё у вас получится)

      Ответить
      • Вячеслав:

        Спасибо Вам. Буду пробовать. Очень понравились они мне. Удачи. А если кнопки пристроить в сайтбаре, в отдельном блоке (гаджете), тогда как? Через HTML/JavaScript не пойдет?

        Ответить
        • driver:

          Всё точно так же, выбираете «Дизайн» -> «Добавить гаджет» -> «HTML/JavaScript» если нуна, обзываете гаджет как-нибудь и в поле «Содержание» вписываете всю конструкцию модального окна:

          <a href="#video1">Смотреть Видео</a> <div class="overlay" id="video1"></div> <div class="modal"> <div class="video__title"> Здесь заголовок и краткое описание видео </div> <div class="video" id="youtube"> Здесь прописываете фрейм видео с YoTube... </div> <a href="" onclick="void(0)" class="close"></a> </div>

          Должно всё сработать, только хочу напомнить, что решение остановки видео при закрытии окна у меня не самое лучшее, другого на чистом CSS, пока не нашел, происходит перезагрузка страницы, если для вас это не особо критично(некоторые падают в обморок и руки заламывают), то ставьте смело и творите, творите, творите...

  2. Павел:

    Здравствуйте

    Опишите пожалуйста конкретно и пошагово куда вставлять коды, если я использую WordPress

    Спасибо

    Ответить
  3. Алексей:

    Все делаю как описано...При нажатии ссылки на вызов окна происходит сдвиг всего экрана, окно не появляется.При обновлении сайта выскакивает окно. Бьюсь уже второй день.

    Ответить
  4. driver:

    Где же всё как описано? Вот ваши исходники:

    <div class="overlay" id="dok1"></div> <div class="modal"> <div class="video" id="dok1"> <object data="dokument/СтруктураУправления.pdf" type="application/pdf" width="650" height="550" alt="Попробуйте загрузить в другом браузере......"></object> </div> <a href="#" class="overlay" id="dok1"></a> <a href="" onclick="void(0)" class="close"></a> </div>

    Как говорится: найдите кучу отличий.

    Для чего у вас три раза id="dok1"?

    зачем overlay (фон затемнения) в виде ссылки внутри блока модального окна? Если уж и делать в виде ссылки, то достаточно заменить имеющийся div с этим классом.

    Так что...

    Ответить
  5. Олег:

    Всё прекрасно, но блок открывается только в верхней части окна браузера, т.е. открывая блок в нижней части сайта (после прокрутки вниз), браузер затемняется, но видео блок не виден. И только после прокрутки вверх появляется блок. Как это можно исправить...Помогите.

    Спасибо.

    Ответить
    • driver:

      У модального блока (в css селектор .modal) выставлено абсолютное позиционирование position: absolute;, просто измените на фиксированное position: fixed;. В этом случае окно будет оставаться на месте, строго по центру, а контент под ним будет прокручиваться.

      Ответить
  6. Закрываю окно, нажимаю на крестик, а страница зачем обновляется? Как убрать

    Ответить
    • driver:

      Решения остановки видео при закрытии окна на чистом CSS нет, поэтому используется такой вот костыль — тупо перезагрузка страницы.

      Убрать перезагрузку не сложно, просто впишите в href что-то типа #close, а событие onclick="void(0)" исключите, получится следующее:

      <a href="#close" class="close"></a>

      И тогда при закрытии окна виде будет продолжать проигрываться, картинка исчезнет, а звук останется. Такие вот пироги)))

      Если для вашего проекта это критично, просто используйте готовые, навороченные плагины на jQuery.

      Ответить
  7. Расписывать не вижу смысла. Кто хочет, тот разберется.

    codepen.io/NeedHate/pen/gPJeqd

    Ответить
    • driver:

      NeedHate, спасибо, как всегда вовремя и по делу))). Теперь ожидаются вопросы по Vimeo и т.д. и т.п.

      Ответить
  8. Александр:

    Спасибо за этот скрипт! Я все голову ломал как встроить кучу видео на сайт!!! Только подскажите пожалуйста как отключить автозапуск видео, а то как только открываю файл тут же видео начинает воспроизводится...

    Ответить
    • driver:

      Если вы используете встроенное видео стандартным способом с YouTube, по-умолчанию автозапуск отключён. За включение автозапуска отвечает параметр autoplay в конце ссылки на видео:

      http://www.youtube.com/embed/VIDEO_ID?autoplay=1. Значение 1 указывает на то, что воспроизведение видео начинается автоматически после загрузки проигрывателя. Если у вас в ссылке на видео такой параметр присутствует, просто исключите его или выставьте значение 0.

      Ответить
      • Александр:

        Вот именно, что я использую свое видео, которое находится у меня на сайте...

        Ответить
        • driver:

          Я же не телепат и просто не могу видеть, каким вы плеером пользуетесь у себя на сайте. Смотрите код вашего плеера, ищите что-то типа autostart=true или autoplay=1, в общем нуна разбираться с настройками проигрывателя

  9. Карина:

    Здравствуйте, у меня не работает плагин jQuery ,можете пожалуйста скинуть исходник с js ?

    Ответить
    • driver:

      Здравствуйте, Карина. Что именно у вас не работает? Модальный блок на чистом css, jQuery подключил лишь для возможности управления видеоплеером с помощью API JavaScript, дабы он выключался при закрытии модального окна.

      Архив с исходниками обновил, прописал всё что нужно, думаю теперь не потеряетесь: тынц

      Ответить
  10. Доброго времени суток. А как вывести окна в цикле ? Пробую переопределить все переменные и ид блоков — а работает только с последним элементом

    Ответить
  11. Алексей:

    Ребят, а как на несколько видео этот скрипт кнопки прилепить? Одно, первое, видео закрывается норм, а остальные на фоне играют.

    Чет не работает и все тут. И ID менял и пр. Не особо шарю в js (вообще не шарю).

    Ответить
    • Нуна повесить событие на кнопку закрытия окна и привязать к АПИ плеера youtube . Типа при клике закрыть видео останавливается и окно закрывается. У меня такая фигня тоже была

      Ответить
      • Алексей:

        Поподробнее можно? Я просто реально не шарю в скриптах:(

        Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru