1) Вставляем в стили:

.pop-up {
 width: 500px;
 box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
 background: rgba(0,0,0,0.5);
 position: fixed;
 top: 50%;
 margin-top: 100%;
 left: 50%;
 margin-left: -250px;
 z-index: 9;
 color: #fff;
 display: none;
}

.popup-close {
 width: 50px;
 margin-right: -60px;
 opacity: 0.8;
 float: right; 
 cursor: pointer;
}

.popup-l1, .popup-l2 {
 width: 6px;
 height: 50px;
 margin-top: -5px;
 margin-left: 22px;
 background: #fff;
}

.popup-l1 {
 float: left;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
}

.popup-l2 {
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

.popup-close:hover {
 opacity: 1;
}

2) На страницу добавляем следующий код:

<script>
function open_popup(box, width, height, yt) {
 if(!$(box+' iframe').length && yt) {
 $(box).append('<iframe id="yt" width="'+width+'" height="'+height+'" src="//www.youtube.com/embed/'+yt+'?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>');
 }
 $(box+' .popup-close').html('<div class="popup-l1"></div><div class="popup-l2"></div>');
 if(width) $(box).css({'width': width, 'margin-left': -(width/2)});
 if(height) $(box).css({'height': height, 'margin-top': -(height/2)});
 else $(box).css('margin-top', -($(box).height()/2));
 $(box).show();
}
function close_popup(box) {
 $(box).hide();
 $(box+' #yt').remove();
}
</script>

(Для работы скрипта требуется jQuery)

Использование:
Для открытия окна используется функция open_popup(). Эта функция принимает 4 параметра (можно указать только один): идентификатор блока, ширина блока, высота блока, идентификатор видео YouTube

Пример использования модального окна с HTML кодом:

<div id="box-1" class="pop-up">
 <div class="popup-close" onclick="close_popup('#box-1')"></div>
 HTML код
</div>
<a href="#" onclick="open_popup('#box-1')">Открыть</a>

Пример использования модального окна с YouTube видео:

<a href="#" onclick="open_popup('#box-2', 640, 360, 'IuQf4t0QWnE')">Смотреть</a>

<div id="box-2" class="pop-up"><div class="popup-close" onclick="close_popup('#box-2')"></div></div>