<!-- 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;
}
}/* 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.