@odopod/odo-video/css/odo-video.css

A lightweight html5 video wrapper.

.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);
}