video header

HTML

              
                <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>

CSS

              
                //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;

JS

              
                $(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");
			}
		}
	});
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions