@odopod/odo-video
Version:
A lightweight html5 video wrapper.
272 lines (236 loc) • 5.43 kB
CSS
.odo-video {
position: relative;
display: block;
overflow: hidden;
width: 100%;
}
.odo-video--fullscreen {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
}
.odo-video--idle {
cursor: none;
}
.odo-video video {
position: relative;
z-index: 0;
display: block;
width: 100%;
-webkit-transition: 160ms ease-out;
transition: 160ms ease-out;
}
.odo-video--buffering video {
opacity: .8;
}
.odo-video button {
outline: 0;
}
/* Controls */
.odo-video__controls {
position: relative;
z-index: 1;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
width: 100%;
height: 32px;
margin: 0 auto;
-webkit-transition: opacity 250ms ease-out 300ms;
transition: opacity 250ms ease-out 300ms;
background-color: rgb(34, 34, 34);
}
.odo-video--no-flexbox .odo-video__controls > * {
float: left;
}
.odo-video--overlay .odo-video__controls {
position: absolute;
background-color: rgba(34, 34, 34, .7);
}
.odo-video--idle .odo-video__controls,
.odo-video--overlay.odo-video--playing .odo-video__controls {
opacity: 0;
}
.odo-video--overlay.odo-video:hover .odo-video__controls {
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
opacity: 1;
}
.odo-video--on-top .odo-video__controls {
bottom: 32px;
width: 70%;
}
.odo-video--fullscreen .odo-video__controls {
position: absolute;
}
.odo-video__controls--stacked {
overflow: visible;
}
.odo-video__play-toggle,
.odo-video__volume,
.odo-video__fullscreen {
position: relative;
display: block;
width: 32px;
height: 32px;
padding: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
border: 0;
background: none;
}
.odo-video__play-toggle:focus,
.odo-video__volume:focus,
.odo-video__fullscreen:focus {
box-shadow: inset 0 0 0 2px rgba(27, 127, 204, .8);
}
.odo-video__play-control,
.odo-video--playing .odo-video__pause-control,
.odo-video__mute-control,
.odo-video--muted .odo-video__unmute-control,
.odo-video__fullscreen-control,
.odo-video--fullscreen .odo-video__exit-fullscreen-control {
display: block;
}
.odo-video__controls--hidden,
.odo-video__pause-control,
.odo-video--playing .odo-video__play-control,
.odo-video__unmute-control,
.odo-video--muted .odo-video__mute-control,
.odo-video__exit-fullscreen-control,
.odo-video--fullscreen .odo-video__fullscreen-control {
display: none;
}
.odo-video__flexible-space {
box-sizing: border-box;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.odo-video__progress-container {
position: relative;
box-sizing: border-box;
height: 100%;
padding: 12px 4px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
/* The only browser w/o flexbox support which OdoVideo supports is IE9 */
.odo-video--no-flexbox .odo-video__flexible-space,
.odo-video--no-flexbox .odo-video__progress-container {
/* 3 32px buttons and ~54px time */
width: calc(100% - 150px);
}
.odo-video__controls--stacked .odo-video__progress-container {
position: absolute;
bottom: 100%;
width: 100%;
height: 2px;
padding: 0;
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
-webkit-transition: 200ms ease-out;
transition: 200ms ease-out;
background-color: rgb(34, 34, 34);
}
.odo-video:hover .odo-video__controls--stacked .odo-video__progress-container {
height: 10px;
}
.odo-video--overlay .odo-video__controls--stacked .odo-video__progress-container {
background-color: rgba(34, 34, 34, .7);
}
.odo-video__progress-holder {
position: relative;
height: 100%;
}
.odo-video__buffer,
.odo-video__progress {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgb(77, 77, 77);
}
.odo-video__progress {
z-index: 2;
background-color: rgb(191, 191, 191);
}
.odo-video__current-time {
display: block;
width: auto;
height: 32px;
padding: 0;
padding: 0 8px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
color: rgb(224, 224, 224);
font-size: .9375em;
line-height: 32px;
}
/* Icons */
.odo-video__play-control {
width: 0;
height: 0;
margin-left: 9px;
border-width: 8px 0 8px 14px;
border-style: solid none solid solid;
border-color: transparent transparent transparent rgb(224, 224, 224);
}
.odo-video__play-toggle:hover .odo-video__play-control {
border-left-color: rgb(255, 255, 255);
}
.odo-video__pause-control {
position: absolute;
top: 8px;
left: 9px;
width: 5px;
height: 16px;
margin: 0;
background-color: rgb(224, 224, 224);
box-shadow: 8px 0 0 0 rgb(224, 224, 224);
}
.odo-video__play-toggle:hover .odo-video__pause-control {
background-color: rgb(255, 255, 255);
box-shadow: 8px 0 0 0 rgb(255, 255, 255);
}
.odo-video__volume svg,
.odo-video__fullscreen svg {
position: absolute;
top: 8px;
left: 8px;
display: block;
width: 16px;
height: 16px;
margin: 0;
fill: rgb(224, 224, 224);
}
.odo-video__volume:hover svg,
.odo-video__fullscreen:hover svg {
fill: rgb(255, 255, 255);
}