Responsive Vimeo Embedding & Custom Buttons
.banner-container {
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto;
}
.bkgd-image-style {
position: relative;
width: 100%;
}
.video-wrapper {
width: 49.6%;
position: absolute;
top: 0px;
height: auto;
}
a.play-pause-button {
width: 50px;
height: 50px;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
&:hover + .video-control {
opacity: 0.5;
}
iframe #player .controls-wrapper {
display: none;
}
}
/* video button style */
.video-control {
opacity: 0;
position: absolute;
width: 22.5%;
height: 40%;
top: 31%;
left: 38%;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
&:before, &:after {
content: ”;
width: 100%;
height: 100%;
max-width: 131px;
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: absolute;
}
&:before {
background-image: url(“http://joekang.co/assets/image-hosting/video-buttons-white.png”);
background-position: 53% 98%;
background-size: 332%;
/*content: “ea1c”;*/
}
&:after {
background-image: url(“http://joekang.co/assets/image-hosting/video-buttons-white.png”);
background-position: -292px -292px;
background-size: 332%;
/*content: “ea1d”;*/
}
&.paused:after, &.playing:before {
opacity: 0;
}
}
.video-control-show {
opacity: 0.5;
}
/* audio button style */
.audio-control {
opacity: 1;
position: absolute;
width: 6%;
height: 9%;
bottom: 3%;
left: 2%;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
&:before, &:after {
position: absolute;
content: ”;
width: 100%;
height: 100%;
max-width: 36px;
background-repeat: no-repeat;
background-size: 100%;
display: block;
}
&:before {
background-image: url(“http://joekang.co/assets/image-hosting/video-buttons-white.png”);
background-position: -1% -2%;
background-size: 254%;
}
&:after {
background-image: url(“http://joekang.co/assets/image-hosting/video-buttons-white.png”);
background-position: 69% -1%;
background-size: 254%;
}
&.unmuted:after, &.muted:before {
opacity: 0;
}
}
/* default style */
body {
background: linear-gradient(to right, #8e44ad, #c0392b);
}
.title-wrapper {
text-align: center;
margin: 3% 0;
font-size: 2.5vw;
span {
color: #fff;
}
}
