@devbookhq/docusaurus-code-video-plugin/lib/theme/CodeBlock/VideoPlayer/styles.module.css

Add a video to a Docusaurus code block and highlight code lines as the video plays.

.video-wrapper {
  position: relative;
}

.video-container {
  position: absolute;

  display: flex;
  padding-top: 5px;
  z-index: 1;
  right: -48px;
}

.play-wrapper {
  position: relative;
  cursor: pointer;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;

  color: var(--ifm-color-primary);
  border: 2px solid var(--ifm-color-primary);
}

.play-wrapper:hover {
  border: 2px solid var(--ifm-color-primary-dark);
  color: var(--ifm-color-primary-dark);
}

.play-thumbnail {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  height: 100%;
  filter: brightness(0.83) blur(2px);
}

.play {
  position: absolute;
  margin-left: 4px;
}

.close {
  position: absolute;
}

@media (max-width: 996px) {
  .video-container {
    display: none;
  }
}