#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#video {
  position: absolute;
  width: 100%;
  height: auto;
  font-family: sans-serif;
  color: #fff;
  background: black;
}

#video video {
  z-index: 1;
}

#video .embed {
  display: none;
  position: absolute;
  height: 32px;
  margin: 4px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #1a1a1a;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-size: 12px; 
}

#video .embed b {
  position: absolute;
  top: 6px;
  left: 6px;
}
#video .embed input {
  position: absolute;
  left: 85px;
  top: 4px;
  right: 4px;
  height: 18px;
  font-size: 85%;
}

#video .error {
  margin: 100px auto;
  background-color: #a00;
  color: #fff;
  z-index: 11;
  display: none;
}

#video .controls {
  bottom: 0px;
  height: 48px;
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 10;
}

#video .controls > * {
  position: absolute;
  padding: 8px;
  margin: 4px;
  top: 0px;
  bottom: 0px;
  background-color: #1a1a1a;
  border: none;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#video .controls button {
  background-position: center;
  background-repeat: no-repeat;
}

#video .controls button.play {
  left: 0px;
  width: 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAQ6wAAEJwBMOoHTQAAAAd0SU1FB9oEGxQ3BIGsjDYAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAXUlEQVQ4y2NgGDLgPwTEkaOXEZthyPKMjIxEG8ZEhEPjKPUmNhBHqTcxNeDxNxM1I4hkl+FzJROlyYhqhlHLZfHYIoKFUteQ67J4krIDjkRLdA5gocBXtC01Bi8AANPpWdNnbj4/AAAAAElFTkSuQmCC);
}

#video .controls button.share {
  right: 0px;
  width: 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAQ6wAAEJwBMOoHTQAAAAd0SU1FB9oFDRYxCeLRopAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAUElEQVQ4y2NgGDbg////e/9DwF5qGfSfIgOBGlf9xwKoYghJLsNiyF6SwwyXIaR6x5sqgQs1jLxApbnLqBpmNIlNmqQzmuQAmuRNqpcadAUABepBjHBIN7MAAAAASUVORK5CYII=);
}

#video .controls button.fullscreen {
  right: 0px;
  width: 40px;
}

#video .controls button:hover {
  background-color: #17f;
}

#video .progress {
  left: 44px;
  right: 44px;
  font-size: 14px;
}

#video .progress .position {
  text-align: right;
  position: absolute;
  left: 0;
  width: 60px;
  top: 13px;
}

#video .progress .end {
  vertical-align: middle;
  position: absolute;
  right: 0px;
  width: 60px;
  top: 13px;
}

#video .progress .slot {
  position: absolute;
  left: 68px;
  right: 68px;
  top: 11px;
  bottom: 11px;
  border: 1px solid #333;
}

#video .progress .slot .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
}

#video .progress .bar.played {
  background-color: #17f;
}

#video .progress .bar.loaded {
  background-color: #0738aa;
}