@uploadcare/blocks/blocks/Video/video.css

Building blocks for Uploadcare products integration

@import '../Range/range.css';

lr-video {
  --color-accent: rgb(196, 243, 255);

  display: inline-grid;
  grid-template-rows: 1fr min-content;
  max-height: var(--uploadcare-blocks-window-height, 100vh);
  overflow: hidden;
  font-family: monospace;
  background-color: #000;
  border-radius: 6px;
}

lr-video [hidden] {
  display: none !important;
}

lr-video lr-range[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

lr-video .video-wrapper {
  overflow: hidden;
}

lr-video video {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ccc;
  background-color: #000;
}

lr-video lr-icon {
  --icon-play: 'M8,5.14V19.14L19,12.14L8,5.14Z';
  --icon-pause: 'M14,19H18V5H14M6,19H10V5H6V19Z';
  --icon-mute: 'M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z';
  --icon-unmute: 'M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z';
  --icon-fullscreen-on: 'M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z';
  --icon-fullscreen-off: 'M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z';
  --icon-captions: 'M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z';
  --icon-captions-off: 'M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z';

  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: currentColor;
}

lr-video:not([controls]) .toolbar {
  display: none;
}

lr-video .toolbar {
  position: relative;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-accent);
  background-color: #000;
  transition: 0.4s;
}
lr-video[playback] .toolbar {
  opacity: 0.2;
}
lr-video .toolbar:hover {
  opacity: 1;
}

lr-video .toolbar .tb-block {
  display: flex;
  align-items: center;
}

lr-video .toolbar .tb-block button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: var(--color-accent);
  background-color: transparent;
  border: none;
  cursor: pointer;
}
lr-video .progress {
  position: absolute;
  top: -18px;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  height: 20px;
  cursor: pointer;
}
lr-video .progress .bar {
  height: 2px;
  background-color: var(--color-accent);
  transition: 0.5s;
}