@smartimpact-it/modern-video-embed 2.0.5 → 2.0.7

package/dist/css/main.css

@@ -11860,44 +11860,47 @@ textarea.form-control-lg {
   }
 }
 /**
-* SVG encoding functions
-*/
+ * YouTube Embed Component Styles
+ * Uses shared base styles with YouTube-specific branding
+ */
+/**
+ * Base styles and mixins for all video embed components
+ * Provides reusable CSS patterns to reduce duplication
+ */
+/**
+ * Shared SCSS functions for SVG encoding
+ * Used by all video embed components
+ */
 youtube-embed {
-  --video-aspect-ratio: 56.25%;
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
+  --si-embed-video-aspect-ratio: 56.25%;
+  --si-embed-aspect-width: 16;
+  --si-embed-aspect-height: 9;
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
   display: block;
   position: relative;
   width: 100%;
-  padding-top: var(--video-aspect-ratio);
+  padding-top: var(--si-embed-video-aspect-ratio);
   overflow: hidden;
   background-color: #000;
 }
-youtube-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  object-fit: var(--video-object-fit);
-}
+youtube-embed .video-poster,
 youtube-embed .youtube-poster,
-youtube-embed .video-poster {
+youtube-embed .vimeo-poster {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: var(--poster-object-fit);
+  object-fit: var(--si-embed-poster-object-fit);
   display: block;
   cursor: pointer;
 }
 youtube-embed .button-overlay {
-  background: var(--overlay-background-color);
+  background: var(--si-embed-overlay-background-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -11914,17 +11917,19 @@ youtube-embed .button-overlay {
 }
 youtube-embed.is-playing .button-overlay {
   opacity: 0;
+  pointer-events: none;
 }
 youtube-embed.is-playing:hover .button-overlay {
   opacity: 1;
+  pointer-events: auto;
 }
 youtube-embed .button-overlay .button {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--control-button-size);
-  width: var(--control-button-size);
+  height: var(--si-embed-control-button-size);
+  width: var(--si-embed-control-button-size);
   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
   background-size: cover;
   background-repeat: no-repeat;
@@ -11949,17 +11954,11 @@ youtube-embed.is-background iframe {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-width: 100%;
-  min-height: 100%;
+  aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
   width: auto;
   height: auto;
-}
-@supports (aspect-ratio: 16/9) {
-  youtube-embed.is-background iframe {
-    aspect-ratio: 16/9;
-  }
-}
-youtube-embed.is-background iframe {
+  min-width: 100%;
+  min-height: 100%;
   pointer-events: none;
 }
 youtube-embed.is-background .button-overlay {
@@ -11973,7 +11972,7 @@ youtube-embed.has-background-controls .button-overlay {
   padding: 1rem;
 }
 youtube-embed.has-background-controls .button-overlay .button {
-  --control-button-size: 40px;
+  --si-embed-control-button-size: 40px;
   opacity: 0.7;
   transition: opacity 0.2s ease;
 }
@@ -12005,7 +12004,7 @@ youtube-embed .youtube-error-message .error-content {
   max-width: 400px;
 }
 youtube-embed .youtube-error-message .error-content svg {
-  color: #ff4444;
+  color: #ff0000;
   margin-bottom: 1rem;
 }
 youtube-embed .youtube-error-message .error-content .error-message {
@@ -12032,46 +12031,50 @@ youtube-embed .youtube-error-message .error-content .retry-button:focus {
   outline: 2px solid white;
   outline-offset: 2px;
 }
+youtube-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
 
 /**
-* SVG encoding functions (shared with YouTube embed)
-*/
+ * Vimeo Embed Component Styles
+ * Uses shared base styles with Vimeo-specific branding
+ */
 vimeo-embed {
-  --video-aspect-ratio: 56.25%;
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
+  --si-embed-video-aspect-ratio: 56.25%;
+  --si-embed-aspect-width: 16;
+  --si-embed-aspect-height: 9;
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
   display: block;
   position: relative;
   width: 100%;
-  padding-top: var(--video-aspect-ratio);
+  padding-top: var(--si-embed-video-aspect-ratio);
   overflow: hidden;
   background-color: #000;
 }
-vimeo-embed iframe {
+vimeo-embed .video-poster,
+vimeo-embed .youtube-poster,
+vimeo-embed .vimeo-poster {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  border: none;
-  object-fit: var(--video-object-fit);
-}
-vimeo-embed .vimeo-poster,
-vimeo-embed .video-poster {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: var(--poster-object-fit);
+  object-fit: var(--si-embed-poster-object-fit);
   display: block;
   cursor: pointer;
 }
 vimeo-embed .button-overlay {
-  background: var(--overlay-background-color);
+  background: var(--si-embed-overlay-background-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -12088,17 +12091,19 @@ vimeo-embed .button-overlay {
 }
 vimeo-embed.is-playing .button-overlay {
   opacity: 0;
+  pointer-events: none;
 }
 vimeo-embed.is-playing:hover .button-overlay {
   opacity: 1;
+  pointer-events: auto;
 }
 vimeo-embed .button-overlay .button {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--control-button-size);
-  width: var(--control-button-size);
+  height: var(--si-embed-control-button-size);
+  width: var(--si-embed-control-button-size);
   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
   background-size: cover;
   background-repeat: no-repeat;
@@ -12123,17 +12128,11 @@ vimeo-embed.is-background iframe {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-width: 100%;
-  min-height: 100%;
+  aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
   width: auto;
   height: auto;
-}
-@supports (aspect-ratio: 16/9) {
-  vimeo-embed.is-background iframe {
-    aspect-ratio: 16/9;
-  }
-}
-vimeo-embed.is-background iframe {
+  min-width: 100%;
+  min-height: 100%;
   pointer-events: none;
 }
 vimeo-embed.is-background .button-overlay {
@@ -12147,7 +12146,7 @@ vimeo-embed.has-background-controls .button-overlay {
   padding: 1rem;
 }
 vimeo-embed.has-background-controls .button-overlay .button {
-  --control-button-size: 40px;
+  --si-embed-control-button-size: 40px;
   opacity: 0.7;
   transition: opacity 0.2s ease;
 }
@@ -12206,5 +12205,223 @@ vimeo-embed .vimeo-error-message .error-content .retry-button:focus {
   outline: 2px solid white;
   outline-offset: 2px;
 }
+vimeo-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
+
+/**
+ * Video Embed Component Styles
+ * Uses shared base styles with video-specific overrides
+ */
+video-embed {
+  --si-embed-video-aspect-ratio: 56.25%;
+  --si-embed-aspect-width: 16;
+  --si-embed-aspect-height: 9;
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
+  display: block;
+  position: relative;
+  width: 100%;
+  padding-top: var(--si-embed-video-aspect-ratio);
+  overflow: hidden;
+  background-color: #000;
+}
+video-embed .video-poster,
+video-embed .youtube-poster,
+video-embed .vimeo-poster {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--si-embed-poster-object-fit);
+  display: block;
+  cursor: pointer;
+}
+video-embed .button-overlay {
+  background: var(--si-embed-overlay-background-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  transition: opacity 0.3s ease;
+  z-index: 10;
+}
+video-embed.is-playing .button-overlay {
+  opacity: 0;
+  pointer-events: none;
+}
+video-embed.is-playing:hover .button-overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+video-embed .button-overlay .button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--si-embed-control-button-size);
+  width: var(--si-embed-control-button-size);
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+video-embed.is-playing .button-overlay .button {
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E");
+}
+video-embed.is-background {
+  padding-top: 0;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  overflow: hidden;
+  background: #000;
+}
+video-embed.is-background video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: calc(100% * var(--si-embed-aspect-height) / var(--si-embed-aspect-width));
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+video-embed.is-background video::-webkit-media-controls {
+  display: none !important;
+}
+video-embed.is-background video::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+video-embed.is-background .button-overlay {
+  display: none;
+}
+video-embed.has-background-controls .button-overlay {
+  display: flex;
+  background: none;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 1rem;
+}
+video-embed.has-background-controls .button-overlay .button {
+  --si-embed-control-button-size: 40px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+video-embed.has-background-controls .button-overlay .button:hover {
+  opacity: 1;
+}
+video-embed.has-background-controls.is-playing .button-overlay {
+  opacity: 0;
+}
+video-embed.has-background-controls.is-playing .button-overlay:hover {
+  opacity: 1;
+}
+video-embed .video-error-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  z-index: 1000;
+}
+video-embed .video-error-message .error-content {
+  text-align: center;
+  padding: 2rem;
+  max-width: 400px;
+}
+video-embed .video-error-message .error-content svg {
+  color: #ff4444;
+  margin-bottom: 1rem;
+}
+video-embed .video-error-message .error-content .error-message {
+  margin: 1rem 0;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+video-embed .video-error-message .error-content .retry-button {
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: #ff4444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: background 0.2s ease;
+}
+video-embed .video-error-message .error-content .retry-button:hover {
+  background: #cc0000;
+}
+video-embed .video-error-message .error-content .retry-button:focus {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+video-embed video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
+video-embed video::-webkit-media-controls {
+  display: none !important;
+}
+video-embed video::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+video-embed[controls] video::-webkit-media-controls {
+  display: flex !important;
+}
+video-embed[controls] video::-webkit-media-controls-enclosure {
+  display: flex !important;
+}
+video-embed .video-poster {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+video-embed.is-fullscreen {
+  padding-top: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+}
+video-embed.is-fullscreen video {
+  object-fit: contain;
+}
 
 /*# sourceMappingURL=main.css.map */