release: v3.0.0

src/components/VideoElement.css

@@ -1,4 +1,4 @@
-.video-container {
+.sp-video-container {
   position: relative;
   width: 100%;
   height: 100%;
@@ -6,7 +6,7 @@
   pointer-events: none;
 }
 
-.video-element {
+.sp-video-element {
   width: 100%;
   height: 100%;
   display: block;
@@ -15,17 +15,17 @@
   background-color: #000;
 }
 
-.video-element::-webkit-media-controls,
-.video-element::-webkit-media-controls-enclosure,
-.video-element::-webkit-media-controls-panel {
+.sp-video-element::-webkit-media-controls,
+.sp-video-element::-webkit-media-controls-enclosure,
+.sp-video-element::-webkit-media-controls-panel {
   display: none !important;
 }
 
-.video-element::-moz-media-controls {
+.sp-video-element::-moz-media-controls {
   display: none !important;
 }
 
-.custom-subtitle-overlay {
+.sp-subtitle-overlay {
   position: absolute;
   left: 0;
   right: 0;
@@ -36,25 +36,25 @@
   pointer-events: none;
 }
 
-.custom-subtitle-overlay.bottom {
+.sp-subtitle-overlay.bottom {
   bottom: var(--player-subtitle-bottom);
   transition: bottom var(--player-transition-fast) ease;
 }
 
-.video-player.controls-hidden .custom-subtitle-overlay.bottom {
+.sp-video-player.sp-controls-hidden .sp-subtitle-overlay.bottom {
   bottom: var(--player-subtitle-bottom-hidden);
 }
 
-.custom-subtitle-overlay.top {
+.sp-subtitle-overlay.top {
   top: 24px;
 }
 
-.custom-subtitle-overlay.center {
+.sp-subtitle-overlay.center {
   top: 50%;
   transform: translateY(-50%);
 }
 
-.custom-subtitle-stack {
+.sp-subtitle-stack {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -63,7 +63,7 @@
   max-width: min(92%, 1200px);
 }
 
-.custom-subtitle-cue {
+.sp-subtitle-cue {
   display: inline-block;
   max-width: 100%;
   padding: 0.35em 0.75em;
@@ -83,7 +83,7 @@
 }
 
 @media (max-width: 640px) {
-  .custom-subtitle-cue {
+  .sp-subtitle-cue {
     font-size: 1.2rem;
   }
 }