You are here

Home » API reference » Varbase Media 8.6

varbase-video-player.theme.css in Varbase Media 8.6

Same filename and directory in other branches
  1. 8.7 css/theme/varbase-video-player.theme.css
  2. 8.5 css/theme/varbase-video-player.theme.css
  3. 9.0.x css/theme/varbase-video-player.theme.css
.video-player-icon {
  position: relative;
}
.video-player-icon.js-video-player-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  cursor: pointer;
  z-index: 3;
}
.video-player-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../../images/play.svg) no-repeat center center;
  height: 72px;
  width: 72px;
  max-height: 55%;
  font-size: 15%;
  cursor: pointer;
}
.video-player-icon:hover:after {
  opacity: 0.75;
}
[dir="rtl"] .video-player-icon.js-video-player-icon {
  right: 0;
  left: auto;
}
.media--type-video-embed,
.media--type-remote-video,
.media--type-video {
  position: relative;
}

File

css/theme/varbase-video-player.theme.css
View source 
  1. .video-player-icon {

  2.   position: relative;

  3. }

  4. .video-player-icon.js-video-player-icon {

  5.   position: absolute;

  6.   top: 0;

  7.   left: 0;

  8.   right: 0;

  9.   margin: 0;

  10.   cursor: pointer;

  11.   z-index: 3;

  12. }

  13. .video-player-icon:after {

  14.   content: "";

  15.   position: absolute;

  16.   top: 50%;

  17.   left: 50%;

  18.   transform: translate(-50%, -50%);

  19.   background: url(../../images/play.svg) no-repeat center center;

  20.   height: 72px;

  21.   width: 72px;

  22.   max-height: 55%;

  23.   font-size: 15%;

  24.   cursor: pointer;

  25. }

  26. .video-player-icon:hover:after {

  27.   opacity: 0.75;

  28. }

  29. [dir="rtl"] .video-player-icon.js-video-player-icon {

  30.   right: 0;

  31.   left: auto;

  32. }

  33. .media--type-video-embed,

  34. .media--type-remote-video,

  35. .media--type-video {

  36.   position: relative;

  37. }