.video-gallery-wrapper {
max-width: 480px;
margin: 0 auto;
padding: 0 10px;
}
.video-gallery {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.05%;
overflow: hidden;
cursor: pointer;
}
.video-gallery img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.video-gallery[data-source=vimeo] img {
top: 0;
}
.video-gallery .video-gallery-title-background {
width: 100%;
height: 100px;
position: absolute;
background-repeat: repeat-x;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
background-position: top;
padding-bottom: 50px;
top: 0;
z-index: 23;
-moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}
.video-gallery .video-gallery-title-text {
position: absolute;
top: 0;
max-width: 100%;
color: #eee;
text-shadow: 0 0 2px rgba(0,0,0,.5);
font-size: 18px;
padding-top: 15px;
left: 12px;
right: 12px;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
z-index: 24;
}
.video-gallery .video-gallery-title-text a {
text-decoration: none;
border-bottom: none;
color: inherit;
}
.video-gallery .video-gallery-title-text a:hover {
text-decoration: none;
border-bottom: none;
color: #fff;
}
.video-gallery .video-gallery-play {
width: 68px;
height: 48px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 11px;
}
.video-gallery:hover .video-gallery-play {
background-color: #e1a931;
}
.video-gallery .video-gallery-play:before {
content: "";
border-style: solid;
border-width: 10px 0 10px 20.0px;
border-color: transparent transparent transparent #fff;
}
.video-gallery img,
.video-gallery .video-gallery-play {
cursor: pointer;
}
.video-gallery img,
.video-gallery iframe,
.video-gallery .video-gallery-play,
.video-gallery .video-gallery-play:before {
position: absolute;
}
.video-gallery .video-gallery-play,
.video-gallery .video-gallery-play:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.video-gallery iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}