<header class="p-main-header  p-main-header_sm b-text-color b-text-color_white ">
    <!-- <video src="/static/site/assets/video/master.mp4" class="b-bgvideo" autoplay loop></video><!-- autoplay -->
    <div class="b-bgvideo" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/e9/f7/01/e9f701b1b22c98fad8c2b2fc6c527015.jpg');"></div>
	<video src="http://bashinsky.pro/sources/codepen/BEST%20OF%20SNOWBOARD%202016.mp4" class="b-bgvideo" autoplay="" loop="" muted></video>
                <div class="b-head-bgimage" style="background-image:url();"></div>
            
        
        <div class="b-container b-container_inline-block b-container_fluid-outer b-container_up">
            <!--begin b-top-menu -->
            <div class="b-top-menu b-text-color b-text-color_gray-blue">
                <div class="b-top-menu__item b-top-menu__item_right b-text-default b-text-default_md">
                    <a href="mailto:ski_club@mail.ru" class="b-email-link b-link">email@email.ru</a>
                </div>
                <!--end b-top-menu__item-->
                <!--begin b-top-menu__item-->
                <div class="b-top-menu__item b-top-menu__item_right b-text-default b-text-default_md">
                    <span>+7 -880-200-06-00</span>
                </div>
                <!--end b-top-menu__item-->
            </div>
            <!--end b-top-menu -->
            <!--begin b-main-menu-->
            <div class="b-main-menu b-container b-container_fluid-inner b-container_margin-auto">
                <a href="/"><div class="b-main-menu__logo b-main-menu__logo_left"></div></a>
                <div class="b-main-menu__center">
                    <div class="b-heading b-heading_main">
                        <a href="/"><h1 class="">Video Header</h1></a>
                    </div>
                    <nav class="b-main-menu-center__list ">
                        


<ul class="b-main-menu-list">   
    
        <li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">Home</a></li>
    
        <li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">Gallery</a></li>
    
        <li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">News</a></li>
    
        <li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">Shop</a></li>
    
</ul>



                    </nav>
                </div>
                <a href="/"><div class="b-main-menu__logo b-main-menu__logo_right is-hidden"></div></a>
            </div>
            <!--end b-main-menu -->
            <!--begin b-slogan-->
            
<div class="b-slogan">
    <div class="b-slogan__heading b-heading b-heading_1">
<!--         <h1>Горные лыжи - наша работа! </h1> -->
        <h1>Hello ;)</h1>
    </div>
    <div class="b-slogan__description b-text-default b-text-default_lg">
		<p></p><p><br></p><p></p>
    </div>
    <a class="b-slogan__button-play" href="https://www.youtube.com/watch?v=n0F6hSpxaFc"></a>
</div>
        </div>
    </header>
//palitra
color-header := rgba(#0f1b32,.85);
color0 := #000;
color1 := #fff;
color2 := #1a253b;//dark blue
color3 := #232634;//dark blue
color4 := rgba(#f22815,.5);//red
color5 := #e3111e; //red2
color6 := #eaedf6;//lightest
text-color1 := #6c7d9b;//light blue
text-color2 := #4665a4;//lighter blue
text-color3 := #777;
text-color4 := #819acd;
text-color5 := #b9bfc5;//gray-blue
text-color6 := #4665a4;//link color
color-hover1 := #f47f7a;
color-alert := color-hover1;
color-image-layout := rgba(#0f1b32,.6);
//text
text__family_primary := 'Roboto';
text__weight_lite := 300;
text__weight_medium := 400;
text__weight_bold := 800;
//breakpoints
screen-md := 980px;
screen-lg := 1280px;
screen-xl := 1600px;
//indents
gutter-default := 26px;
//paths
path-img := '../../../assets/img/';
//  other
//about
main-container-pt := 80px;
about-text-container := 170px;
head-height := 250px;

//animation
g-animation-duration := .2s;

html
	font-size:10px;
body
	background:#333;
	color:#fff;
	font-family:Roboto;
*	
	box-sizing:border-box;
//=========================
a {
    color: inherit;
    outline: none;
    text-decoration: none;
}
.p-main-header
	position:relative;
	text-align:center;
	padding-bottom:60px;
	overflow:hidden;
	background:color-header;
	height:head-height;

	&_md
		background:none;
		height:630px;
	&_sm
		background-repeat:no-repeat;
		background-size:cover;
		height:auto;
	&_about
		background:none;
		z-index:1;//2
		
.b-bgvideo{
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size:cover;
	background-position:center;
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
	transform: translateX(-50%)   translateY(-50%);
}
//Заголовки
.b-heading
	margin-bottom:20px;
	font-weight:text__weight_bold;
	&_main
		font-weight:text__weight_lite;
		font-size:3.2rem;
		margin-bottom:6px;
		@media all and (min-width:screen-lg)
			font-size:3.6rem;
			margin-bottom:10px;
	&_1
		font-size:4.8rem;
		@media all and (min-width:screen-lg)
			font-size:6rem;
	&_2
		font-size:4.2rem;
		@media all and (min-width:screen-lg)
			font-size:4.8rem;
	&_3-5
		font-size:3rem;
	&_3
		font-size:1.8rem;
		margin-bottom:15px;
		text-transform:uppercase;	
//основной текст
.b-text-default
	font-weight:text__weight_medium;
	&_sm//футер, текстовый блок
		font-size:1.5rem;
	&_sm-resp//второй уровень меню
		font-size:1.1rem;
		@media all and (min-width:screen-lg)
			font-size:1.4rem;
	&_smx
		font-size:1.5rem;
	&_md//шапка, текстовый блок, футер
		font-size:1.6rem;
	&_lg//шапка, футер
		font-size:1.8rem;
//курсивный текст
.b-text-italic
	font-style:italic;
	&_sm
		font-size:1.3rem;
//жирный текст
.b-text-bold
	font-weight:text__weight_bold;
	&_xs//форма
		font-size:1.3rem;
		text-transform:uppercase;
		letter-spacing:1px;
	&_sm//main menu
		font-size:1.4rem;
		text-transform:uppercase;
		letter-spacing:1px;
	&_sm-resp
		font-size:1.1rem;
		text-transform:uppercase;
		letter-spacing:1px;
		@media all and (min-width:screen-lg)
			font-size:1.4rem;
	&_md
		font-size:1.8rem;
		text-transform:uppercase;
		letter-spacing:1px;
//цвет текста
.b-text-color
	&_white
		color:#fff;
	&_black
		color:#000;
	&_gray
		color:text-color3;
	&_gray-blue
		color:text-color5;


.b-text-block
	//margin-bottom:70px;
	/*&:last-child
		margin-bottom:0;
	/*&__text-module
		> *:last-child
			margin-bottom:0;*/
	&_page
		margin-bottom:55px;
	&__text-module
		//margin-bottom:55px;
		position:static;
		& > *:last-child
			margin-bottom:0;
	&_without-mrg-btm
		margin-bottom:0;
	&__title//h2
		font-weight:text__weight_bold;
		line-height:4.8rem;
		font-size:4.2rem;
		margin-bottom:30px;
		margin-top:-8px;
		@media all and (min-width:screen-lg)
			line-height:6.4rem;
			font-size:4.8rem;
		&_page-title
			margin-top:0px;
			margin-bottom:40px;
			line-height:4.8rem;
			font-size:4.8rem;
			@media all and (min-width:screen-lg)
				line-height:6rem;
				font-size:6rem;
		&_application
			margin-top:0px;
			margin-bottom:20px;
			font-size:4.8rem;
			line-height:4.8rem;
			@media all and (min-width:screen-lg)
				line-height:6rem;
				font-size:6rem;
		&_main-page
			margin-top:0px;
			margin-bottom:15px;
			font-size:4.8rem;
			line-height:4.8rem;
			@media all and (min-width:screen-lg)
				line-height:6rem;
				font-size:6rem;
		&_about
			margin-top:0px;
			background:none;
			z-index:1;
			color:color1;
			position:relative;
	&__content-row
		margin-bottom:50px;
		&:last-child
			margin-bottom:0;
	&__description
		line-height:24px;
		font-weight:text__weight_medium;
		font-size:1.8rem;
		padding-right:30px;
	&__content//redactor
		font-size:1.5rem;
		line-height:24px;
		&_f18
			font-size:1.8rem;
		&_mb30
			margin-bottom:30px;	
		table,h2,h3,h4,p,ul,ol
			margin-bottom:20px;
		*:last-child//последнему тегу нулевой марджин
			margin-bottom:0;
		//=========table===========
		table
			border: none;
			width: 100%;
		td,
		th
			padding: 8px 0;
			//border: 1px solid @border_color;
		th
			border-bottom: 1px solid #bebfbf;
			text-align: left;
			font-weight:text__weight_bold;
		tr
			border-bottom:1px solid #e6e8e8;
		//=========ul================
		ul
			padding: 0;
			//margin: 20px 0;
			& > li
				margin: 0 0 10px;
				padding: 0 0 0 20px;
				position: relative;
				&:after
					content: '—';
					position: absolute;
					left: 0;
					top: 0;
					//color: @brown;
		//=========ol================
		ol
			padding: 0;
			//margin: 20px 0;
			counter-reset: section;
			& > li
				margin: 0 0 10px;
				padding: 0 0 0 20px;
				position: relative;
				&:after
					content: counter(section) '.';
					counter-increment: section;
					position: absolute;
					left: 0;
					top: 0;
		//=========h================
		h2,h3,h4
			font-weight:text__weight_bold;
		h2
			line-height:4.2rem;
			font-size:4.2rem;
			margin-bottom:25px;
			@media all and (min-width:screen-lg)
				line-height:4.8rem;
				font-size:4.8rem;
		h3
			line-height:3rem;
			font-size:3rem;
			margin-bottom:20px;
		h4
			line-height:1.8rem;
			font-size:1.8rem;
			text-transform:uppercase;
			margin-bottom:15px;
		img
			width:100%;
			height:auto;
		em
			font-style:italic;
		strong
			font-weight:text__weight_bold;
		a
			color:text-color6;
		&_application
			font-size:1.6rem;
			p
				margin-bottom:10px;
.b-media-block
	//margin-bottom:70px;
	&__image-wrapper
		width:100%;
		overflow:hidden;
		&_lg
			max-height:400px;
		&_md
			max-height:285px;
		&_sm
			max-height:120px;
	&__img
		width:100%;
		height:auto;
//14 bold +main menu +button
//16 normal head
//18 bold

.b-head-bg-wrapper,
.b-head-bg-wrapper__layout
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	right:0;
	background-size:cover;
	background-position:center;
	z-index:1;//1
	
.b-head-bg-wrapper__layout
	background-color:rgba(#000,.4);
	
.b-head-bgimage
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	right:0;
	background-size:cover;
	background-position:center;
	z-index:-1;//0
	&_places
		z-index:0;//0
	
.b-top-menu
	height:60px;
	indents= 20px;
	&__item
		line-height:60px;
		height:60px;
		&:first-child
			margin-right:indents
	&__item_left
		float:left;
		margin-right:indents;
	&__item_right
		float:right;
		margin-left:indents;
		
.b-social
	font-size:0;
	&__item
		display:inline-block;
		margin-right:20px;
		font-size:18px;

.b-main-menu
	logo-width-lg = 100px;
	logo-height-lg = 150px;
	logo-width-md = 75px;
	logo-height-md = 100px;
	display:inline-block;
	text-align:left;
	font-size:0;
	position:relative;
	margin-top:30px;
	@media all and (min-width:screen-lg)
		margin-top:27px;
	&__logo
		//margin-bottom:-10px;
		width:logo-width-md;
		height:logo-height-md;
		@media all and (min-width:screen-lg)
			width:logo-width-lg;
			height:logo-height-lg;
		//background-position:50% 50%;
		background-repeat:no-repeat;
		position:absolute;
		&_left//<img src="/static/site/assets/img/logo1_.png" width="83" height="129">
			background-image:url(path-img+'logo1_.png');
			background-size:83px 129px;
			background-position:0 4px;
			margin-top:-35px;
			//top:0;
			//float:left;
			width:83px;
			height:135px;
			//margin-right:83px * -1;
			left:0;
			@media all and (min-width:screen-lg)
				height:135px;
				margin-top:-25px;
				margin-right:83px * -1;
		&_right//<img src="/static/site/assets/img/logo2_.png" width="62" height="84">
			//float:right;
			background-image:url(path-img+'logo2_.png');
			background-size:62px 84px;
			background-position:100% 0;
			margin-left:logo-width-md * -1;
			height:100px;
			width:62px;
			right:0;
			@media all and (min-width:screen-lg)
				height:100px;
				margin-left:logo-width-lg * -1;

.b-main-menu-list
	border-bottom:1px solid rgba(#fff,.2);
	padding:20px 0;
	//font-size:0;
	display:flex;
	justify-content:space-between;
	flex-direction:row;
	white-space:nowrap;//ie9
	//flex-
	&__item
		display:inline-block;
		position:relative;
		/*items-indents = 1.8vw;//25px
		margin-right:items-indents;*/
		text-transform:uppercase;
		letter-spacing:1px;
		margin-left:-20px;
		margin-right:-20px;
		&:first-child
			margin-left:0;
		&:last-child
			margin-right:0;
		&.is-current
				&:before
					//background:color1;
					content:''
					//height:2px;
					border-bottom:2px solid;
					position:absolute;
					bottom:-22px;
					width:100%;
		
.b-slogan
	margin:210px auto 0;
	&__description{
		line-height:1.6em;
	}
	&__button-play
		display:inline-block;
		width:50px;
		height:50px;
		margin-top:40px;
		font-size:50px;
		position:relative;
		&:before
			content:'';
			width:50px;
			height:50px;
			position:absolute;
			top:0;
			border-radius:50%;
			box-shadow:0 0 0 3px #fff;
			left:0;
			top:0;
		&:after
			content:'';
			position:absolute;
			top:50%;
			left:50%;
			border:10px solid transparent;
			border-left:14px solid #fff;
			transform:translate(-50%,-50%);
			margin-left:7px;
		&:hover
			cursor:pointer;	
			&:after
				content:'';
				border-left-color:color-hover1;
			&:before
				box-shadow:0 0 0 3px color-hover1;
		//background:url(path-img+'play-icon.svg') no-repeat;
	&__url
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		top:0;
.b-place-title
	z-index:2;
	position:relative;
	width:700px;
	margin:120px auto 0;
	&__header
		text-transform:uppercase;
	&__description{
		margin-top:40px;
		line-height:1.6em;
	}
		 
.p-main
	display:block;
	//padding:70px 0 100px;
	position:relative;
	background: linear-gradient(to bottom, rgba(192,202,209,0.5) 0px,rgba(192,202,209,0) 29px);
	&_ptop100
		padding-top:100px;
View Compiled
$(function(){
	$('.b-slogan__button-play').magnificPopup({
		//delegate: '.b-slogan__url', // child items selector, by clicking on it popup will open
		type: 'iframe',
		tLoading: 'Loading video #%curr%...',
		modal:false,
		markup: '<div class="mfp-iframe-scaler">'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
          '</div>', 
		callbacks:{
			open: function(){
				$('.mfp-close').remove();//удаление старой кнопки
				$('<button title="" type="button" class="mfp-close"></button>').appendTo('.mfp-container');
				//var content = $(".mfp-iframe");
			}
		}
	});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js