Главная » Уроки » Модальный блок видео на 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

24 комментария
  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. Доброго времени суток. А как вывести окна в цикле ? Пробую переопределить все переменные и ид блоков — а работает только с последним элементом

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

Отправляя к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