zzМодальный блок

Смотреть Видео

Это просто заголовок и краткое описание видео

+++++++++++++++

Фон затемнения представлен в виде отдельного контейнера <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 и поделитесь ссылкой на запись в своих соц-сетях