Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

Категории: Уроки 12.11.2014 комментариев 27

Наглядный пример того, как можно организовать просмотр в модальном блоке, исключительно средствами , без 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="https://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="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

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

<script type="text/javascript" src="https://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 и поделитесь ссылкой на запись в своих соц-сетях:

Метки: · ·

Всего комментариев: 27

  • Павел: 27 октября, 2015 в 01:56

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

    Ответить
  • Вячеслав: 8 ноября, 2015 в 19:49

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

    Ответить
    • driver: 9 ноября, 2015 в 02:46

      Здравствуйте, Вячеслав.
      В Блоггере выбираете «Шаблон» -> «Изменить HTML»
      Находите раздел <b:skin><![CDATA[ ... ]]></b:skin>
      Внутри этого раздела прописаны все стили вашего шаблона. Чтобы не потеряться в последующем, вставляете стили css модального бока в самый конец, перед ]]></b:skin>, сохраняете изменения.
      Затем при написании сообщения в режиме html, используете html-конструкцию модального блока с вашим видео и не забываете про ссылку активации модального окна с соответствующим id. Работа модального окна будет видна после публикации, в режиме черновика просмотр не срабатывает.
      Внести изменения в css шаблона можно ещё проще, не ковыряя hml. Достаточно выбрать «шаблон» -> «настроить» -> «дополнительно» -> «добавить css» , в открывшееся поле добавить стили мод.окна и нажать «применить к блогу»
      Следует помнить, что блок видео адаптивный с шириной width: 100%; и его размеры будут автоматом подстраиваться под родительский контейнер, если размеры видео-блока вас не устроят(будут меньше чем вы ожидали), измените значение ширины в селекторе .modal на больший например в 120%
      Удачи, надеюсь всё у вас получится)

      Ответить
      • Вячеслав: 13 ноября, 2015 в 23:02

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

        Ответить
  • Алексей: 29 ноября, 2015 в 13:10

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

    Ответить
  • driver: 29 ноября, 2015 в 17:15

    Где же всё как описано? Вот ваши исходники:
    <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 февраля, 2016 в 01:18

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

    Ответить
    • driver: 5 февраля, 2016 в 20:06

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

      Ответить
      • Олег: 7 февраля, 2016 в 14:12

        Получилось. Спасибо большое

        Ответить
  • Иван: 18 февраля, 2016 в 10:01

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

    Ответить
    • driver: 18 февраля, 2016 в 20:20

      Решения остановки видео при закрытии окна на чистом CSS нет, поэтому используется такой вот костыль — тупо перезагрузка страницы.
      Убрать перезагрузку не сложно, просто впишите в href что-то типа #close, а событие onclick="void(0)" исключите, получится следующее:
      <a href="#close" class="close"></a>
      И тогда при закрытии окна виде будет продолжать проигрываться, картинка исчезнет, а звук останется. Такие вот пироги)))
      Если для вашего проекта это критично, просто используйте готовые, навороченные плагины на jQuery.

      Ответить
      • Иван: 19 февраля, 2016 в 09:14

        Например какие? Может обзор замутишь?))

        Ответить
  • NeedHate: 19 февраля, 2016 в 20:20

    Расписывать не вижу смысла. Кто хочет, тот разберется.
    codepen.io/NeedHate/pen/gPJeqd

    Ответить
    • driver: 19 февраля, 2016 в 21:10

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

      Ответить
  • Александр: 29 февраля, 2016 в 11:48

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

    Ответить
    • driver: 29 февраля, 2016 в 12:29

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

      Ответить
      • Александр: 29 февраля, 2016 в 13:34

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

        Ответить
  • Карина: 12 апреля, 2016 в 18:45

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

    Ответить
    • driver: 12 апреля, 2016 в 23:17

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

      Ответить
      • Карина: 13 апреля, 2016 в 16:57

        Спасибо большое за ответ ))

        Ответить
  • Вадим: 26 мая, 2016 в 10:35

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

    Ответить
  • Алексей: 6 ноября, 2017 в 20:24

    Ребят, а как на несколько видео этот скрипт кнопки прилепить? Одно, первое, видео закрывается норм, а остальные на фоне играют.
    Чет не работает и все тут. И ID менял и пр. Не особо шарю в js (вообще не шарю).

    Ответить
    • Вадим: 6 ноября, 2017 в 23:32

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

      Ответить
      • Алексей: 7 ноября, 2017 в 16:38

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

        Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>