<!-- Video Attribution: http://previewmovies.net/ -->
  <header>
		<h1>Google-style Responsive Video Panels</h1>
		<p>I recreated the cool video panel created by Google on their <a href="https://www.google.com/maps/about/behind-the-scenes/streetview/treks/galapagos-islands/">Galapagos trek page</a> for fun and as a learning tool.</p>
	</header>
	<div class="container">
		<div class="panel panel-1">
			<div class="video-background">
				<video width="1424" src="http://avideos.5min.com//415/5177415/517741401_4.mp4#t=20" autobuffer muted loop></video>	
			</div>
			<div class="content">
				<div class="info-snippet">
					<h3>Elysium</h3>
					<p>He can save us all</p>
				</div>
				<div class="info-full">
					<a class="audio-control entypo-mute"></a>
					<h3>Elysium</h3>
					<p class="sub-title">He can save us all</p>
					<p class="rating">Our rating: 3/5</p>
					<p class="rating">IMDB rating: 6/10</p>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, necessitatibus laboriosam doloremque cumque quam maiores maxime iure cupiditate quia delectus incidunt illum porro fuga voluptatem tempora quas eos explicabo suscipit!</p>
				</div>
				<div class="video-overlay"></div>
			</div>
		</div>
		<div class="panel panel-2">
			<div class="video-background">
				<video width="1424" src="http://avideos.5min.com//897/5177897/517789666_4.mp4#t=10" autobuffer muted loop></video>	
			</div>
			<div class="content">
				<div class="info-snippet">
					<h3>The Wolverine</h3>
					<p>Fugitive, hero, legend</p>
				</div>
				<div class="info-full">
					<a class="audio-control entypo-mute"></a>
					<h3>The Wolverine</h3>
					<p class="sub-title">Fugitive, hero, legend</p>
					<p class="rating">Our rating: 3/5</p>
					<p class="rating">IMDB rating: 6/10</p>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, necessitatibus laboriosam doloremque cumque quam maiores maxime iure cupiditate quia delectus incidunt illum porro fuga voluptatem tempora quas eos explicabo suscipit!</p>
				</div>
				<div class="video-overlay"></div>
			</div>
		</div>
		<div class="panel panel-3">
			<div class="video-background">
				<video width="1424" src="http://avideos.5min.com//864/5177864/517786307_4.mp4#t=10" autobuffer muted loop></video>	
			</div>
			<div class="content">
				<div class="info-snippet">
					<h3>Anchorman 2</h3>
					<p>The legend continues</p>
				</div>
				<div class="info-full">
					<a class="audio-control entypo-mute"></a>
					<h3>Anchorman 2</h3>
					<p class="sub-title">The legend continues</p>
					<p class="rating">Our rating: 3/5</p>
					<p class="rating">IMDB rating: 6/10</p>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, necessitatibus laboriosam doloremque cumque quam maiores maxime iure cupiditate quia delectus incidunt illum porro fuga voluptatem tempora quas eos explicabo suscipit!</p>
				</div>
				<div class="video-overlay"></div>
			</div>
		</div>
		<div class="panel panel-4">
			<div class="video-background">
				<video width="1424" src="http://avideos.5min.com//498/5177498/517749793_4v1.mp4#t=20" autobuffer muted loop></video>	
			</div>
			<div class="content">
				<div class="info-snippet">
					<h3>The Hunger Games 2</h3>
					<p>Catching fire</p>
				</div>
				<div class="info-full">
					<a class="audio-control entypo-mute"></a>
					<h3>The Hunger Games 2</h3>
					<p class="sub-title">Catching fire</p>
					<p class="rating">Our rating: 3/5</p>
					<p class="rating">IMDB rating: 6/10</p>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, necessitatibus laboriosam doloremque cumque quam maiores maxime iure cupiditate quia delectus incidunt illum porro fuga voluptatem tempora quas eos explicabo suscipit!</p>
				</div>
				<div class="video-overlay"></div>
			</div>
		</div>		
		<div class="panel panel-5">
			<div class="video-background">
				<video width="1424" src="http://avideos.5min.com//645/5178645/517864483_4.mp4#t=20" autobuffer muted loop></video>	
			</div>
			<div class="content">
				<div class="info-snippet">
					<h3>Kickass 2</h3>
					<p>They're back</p>
				</div>
				<div class="info-full">
					<a class="audio-control entypo-mute"></a>
					<h3>Kickass 2</h3>
					<p class="sub-title">They're back</p>
					<p class="rating">Our rating: 3/5</p>
					<p class="rating">IMDB rating: 6/10</p>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, necessitatibus laboriosam doloremque cumque quam maiores maxime iure cupiditate quia delectus incidunt illum porro fuga voluptatem tempora quas eos explicabo suscipit!</p>
				</div>
				<div class="video-overlay"></div>
			</div>
		</div>				
		<a class="close entypo-cancel"></a>
	</div>
	<footer>
		<p>Feedback, suggestions, or improvements all welcome - <a href="https://twitter.com/emcarru">tweet me!</a><span class="entypo-twitter"></span></p>
	</footer>
@import "compass/css3";

// Note: Should really supply smaller images for mobile layout, if it were to be used.

// base stuff
// --------------------------------

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);

@mixin breakpoint {
	@media (max-width: 800px) { @content; }
}

/* entypo */
[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}

* {
	box-sizing:border-box;
}

body {
	font-family:'Open Sans', sans-serif;
}


// the good stuff
// --------------------------------


.container {
	position:relative;
	height:800px;
	width:100%;
	@include breakpoint {
		height:auto;
	}
}

.panel {
	height:800px;
	width:100%;
	cursor:pointer;
	transition:all 0.3s;
	position:absolute;
	@include breakpoint {
		display:table;
		cursor:default;
		position: relative;
		left: 0;
		clear: both;
		height:400px;
		margin-bottom:20px;		
	}
}

.panel-1 {
	.video-background {
		background-image: url('https://michaelcarruthers.co.uk/vpimages/elysium.png');
	}
}

.panel-2 {
	.content, .video-background{
		left:20%;
	}
	.video-background {
		background-image: url('https://michaelcarruthers.co.uk/vpimages/wolverine.png');
	}	
}

.panel-3 {
	.content, .video-background{
		left:40%;
	}
	.video-background {
		background-image: url('https://michaelcarruthers.co.uk/vpimages/anchorman2.png');
	}	
}

.panel-4 {
	.content, .video-background{
		left:60%;
	}
	.video-background {
		background-image: url('https://michaelcarruthers.co.uk/vpimages/hungergames2.png');
	}		
}

.panel-5 {
	.content, .video-background{
		left:80%;
	}
	.video-background {
		background-image: url('https://michaelcarruthers.co.uk/vpimages/kickass2.png');
	}		
}

.panel .video-background, .panel .content {
	@include breakpoint {
		left:0;
		width:100%;
		height:100%;			
	}
}

.video-background {
	position:absolute;
	height:800px;
	width:20%;
	overflow: hidden;
	background-repeat:no-repeat;
	background-size:cover;
	transition:all 0.3s;
}

video {
	position:absolute;
	min-width:1453px;
	/* just to get rid of the black bars from
	/* using widescreen videos, otherwise removable. */
	transform:scaleY(1.4);
	@include breakpoint {
		display:none;
	}
}

.content {
	position:absolute;
	height:100%;
	overflow:hidden;
	width:20%;
	z-index:1000;
	color:#fff;
	transition:all 0.3s;
	@include breakpoint {
		display:table-cell;
		vertical-align:middle;
		position:relative;
	}
}

.video-overlay {
	display:block;
	position:absolute;
	top:0;left:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.3;
	transition:all 0.3s;
	&:hover {
		opacity:0;
	}
	@include breakpoint {
		display:none;
	}
}


.active-panel {
	cursor:default;
	z-index:10000;
	.video-background {
		width:100%;
		left:0;
	}
	.content {
		width:100%;
		left:0;
	}
	.video-overlay {
		opacity:0;
	}
	.info-snippet {
		opacity:0;
	}
	.info-full {
		opacity:1;
	}
}

.info-snippet {
	position:absolute;
	bottom:30px;
	padding-left:20px;	
	color:#fff;
	opacity:1;
	h3 {
		font-size:16px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing:3px;
		padding-bottom:5px;
	}
	p {
		font-size:15px;
		font-weight: 400;
		font-style: italic;
		color:#D6D6D6;
	}
	@include breakpoint {
		display:none;
	}
}

.info-full{
	display:block;
	opacity:0;
	transition:all 0.3s;
	position:absolute;
	bottom:30px;
	background-color:rgba(#000, 0.7);
	left:20px;
	padding:20px 30px;
	width:100%;
	max-width:400px;
	h3 {
		font-size:30px;
		font-weight: 300;
		line-height: 1.3;
	}
	.sub-title {
		font-size:23px;
		color:#ddd;
		font-weight: 300;
		line-height: 1.5;
		padding-bottom:5px;
	}
	@include breakpoint {
		display:block;
		position:relative;
		left:0;
		bottom:0;
		max-width:100%;
		opacity:1;
	}	
}

.rating {
	font-size:20px;
	font-weight: 300;
	font-style: italic;	
	line-height:1.4;
	color:darken(#fff, 3%);
}

.description {
	padding-top:15px;
	font-size:18px;
	line-height:1.3;
}

.close {
	display:block;
	position:absolute;
	top:20px;
	right:30px;
	font-size:60px;
	text-decoration: none;
	cursor:pointer;
	color:#fff;
	z-index:1000000;
	font-weight: 300;
	opacity:0;
	transition:all 0.3s;
}

.show-close {
	opacity:0.7;
	&:hover {
		opacity:1;
	}	
}

.audio-control {
	float:right;
	font-size:25px;
	color:#fff;
	margin-top: 5px;
	cursor:pointer;
	position:relative;
	z-index:500;
	@include breakpoint {
		display:none;
	}
}


// demo content
// --------------------------------

header {
	padding:30px 20px;
	text-align: center;
	h1 {
		font-size:48px;
		font-weight: 300;
		line-height: 1.6;
	}
	p {
		font-size:16px;
		font-weight: 300;
		line-height: 1.6;
		color:#777;
	}	
}


header,footer {
	a {
		text-decoration: none;
		color:#4285f4;
		&:hover {
			color:darken(#4285f4, 5%);
			text-decoration: underline;
		}
	}		
}

footer {
	padding:60px 20px;
	text-align: center;
	p {
		line-height: 1.6;
	}
	span {
		display:inline-block;
		font-size:30px;
		color:#ccc;
		padding-left:13px;
		position: relative;
		top: 3px;
	}
}
View Compiled
/* Google-style responsive video panel
 *  
 * Inspired by https://www.google.com/maps/about/behind-the-scenes/streetview/treks/galapagos-islands/
 * 
 * By Michael Carruthers - 2013
 * michaelcarruthers.co.uk
 */

$(function() {

	var VideoPanels = (function () {
	    var s, // private alias to settings
	    	targetVideo;

	    return {

	        settings: {
	          wind:              $(window),
	          container:         $(".container"),
	          panel:             $(".panel"),
	          activeClass:       "active-panel",
	          closeBTN:          $(".close"),
	          audioControlBTN:   $(".audio-control")
	        },

	        init: function() {
	          s = this.settings;
	          this.bindUIActions();
	          this.setVideoWidth();
	        },

	        bindUIActions: function() {

	        	s.panel
	        		.mouseenter(VideoPanels.toggleVideoState)
	        		.mouseleave(VideoPanels.toggleVideoState)
	        		.click(VideoPanels.setActivePanel);
	        	s.closeBTN.click(VideoPanels.closePanel);
	        	s.wind.resize(VideoPanels.setVideoWidth);
	        	s.audioControlBTN.click(VideoPanels.toggleAudio);

	        }, 

	        setVideoWidth: function() {
	        	$("video").width($(window).width() + "px");
	        },

	        toggleVideoState: function() {

	        	targetVideo = $(this).find("video");
	        	targetVideo = targetVideo.get(0);

	        	if(!$(this).hasClass(s.activeClass)) {
		        	if (targetVideo.paused){
		        		targetVideo.play();
		        	} else {
		        		targetVideo.pause();
		        	}	        		
	        	}

	        },

	        setActivePanel: function() {
	        	$(this).addClass(s.activeClass);
	        	s.closeBTN.addClass("show-close");
	        },

	        closePanel: function() {
	        	s.panel.removeClass(s.activeClass);
	        	s.closeBTN.removeClass("show-close");
	        	VideoPanels.pauseAllVideos();
	        	VideoPanels.muteAudio();
	        },

	        pauseAllVideos: function() {
	        	$("video").each(function () {
	        		this.pause();
	        	});
	        },

	        toggleAudio: function() {
	        	if($("video").prop('muted')){
	        		$("video").prop('muted', false);
	        	} else {
	        		$("video").prop('muted', true);
	        	}
	        	s.audioControlBTN.toggleClass("entypo-sound entypo-mute");
	        },

	        muteAudio: function() {
	        	$("video").prop('muted', true);
	        	s.audioControlBTN.removeClass("entypo-sound").addClass("entypo-mute");
	        }

	    };

	})();

	VideoPanels.init();

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js