You are here

varbase-video-player.theme.css in Varbase Media 9.0.x

.video-player-icon {
  position: relative;
}

.video-player-icon.js-video-player-icon {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
}

.video-player-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  max-height: 55%;
  content: "";
  cursor: pointer;
  transform: translate(-50%, -50%);
  background: url(../../images/play.svg) no-repeat center center;
  font-size: 15%;
}

.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. z-index: 3;
  7. top: 0;
  8. right: 0;
  9. left: 0;
  10. margin: 0;
  11. cursor: pointer;
  12. }
  13. .video-player-icon:after {
  14. position: absolute;
  15. top: 50%;
  16. left: 50%;
  17. width: 72px;
  18. height: 72px;
  19. max-height: 55%;
  20. content: "";
  21. cursor: pointer;
  22. transform: translate(-50%, -50%);
  23. background: url(../../images/play.svg) no-repeat center center;
  24. font-size: 15%;
  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. }