@smartimpact-it/modern-video-embed 2.0.1

package/src/index.ts

@@ -0,0 +1,3 @@
+// Main entry point for Video Embed Components
+import "./components/YouTubeEmbed.js";
+import "./components/VimeoEmbed.js";

package/src/styles/README.md

@@ -0,0 +1,56 @@
+# CSS Files
+
+This directory contains the styles for the video embed components.
+
+## For Production/Integration
+
+Use `components.css` when integrating into your website:
+
+```html
+<!-- Minimal CSS - Components only -->
+<link rel="stylesheet" href="path/to/dist/css/components.css" />
+```
+
+This file contains **only** the essential styles for:
+
+- `youtube-embed` component
+- `vimeo-embed` component
+
+**Size:** ~15KB (much smaller, no Bootstrap)
+
+## For Demos/Examples
+
+Use `main.css` for demos and examples:
+
+```html
+<!-- Full CSS - Components + Bootstrap -->
+<link rel="stylesheet" href="path/to/dist/css/main.css" />
+```
+
+This file includes:
+
+- Bootstrap framework (~200KB)
+- Video embed component styles
+
+**Size:** ~215KB (includes full Bootstrap)
+
+## Source Files
+
+- `components.scss` - Production build (components only)
+- `main.scss` - Demo build (Bootstrap + components)
+- `youtube-embed.scss` - YouTube component styles
+- `vimeo-embed.scss` - Vimeo component styles
+
+## Building
+
+Both CSS files are automatically built when you run:
+
+```bash
+npm run build
+```
+
+Or watch for changes:
+
+```bash
+npm run watch
+```

package/src/styles/components.scss

@@ -0,0 +1,7 @@
+// Video Embed Components - Production Styles
+// This file contains only the essential styles needed for the video embed components
+// Use this when integrating into your website
+
+// Import our custom video embed styles
+@import "./youtube-embed.scss";
+@import "./vimeo-embed.scss";

package/src/styles/main.scss

@@ -0,0 +1,10 @@
+// Video Embed Components - Demo Styles
+// This file includes Bootstrap and component styles for demos and examples
+// For production integration, use components.scss instead
+
+// Import Bootstrap SCSS (only needed for demos)
+@import "../../node_modules/bootstrap/scss/bootstrap";
+
+// Import our custom video embed styles
+@import "./youtube-embed.scss";
+@import "./vimeo-embed.scss";

package/src/styles/vimeo-embed.scss

@@ -0,0 +1,255 @@
+/**
+* SVG encoding functions (shared with YouTube embed)
+*/
+@function svg-str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      svg-str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+  @return $string;
+}
+
+@function svg-url-encode($string) {
+  $map: (
+    "%": "%25",
+    "<": "%3C",
+    ">": "%3E",
+    " ": "%20",
+    "!": "%21",
+    "*": "%2A",
+    "'": "%27",
+    '"': "%22",
+    "(": "%28",
+    ")": "%29",
+    ";": "%3B",
+    ":": "%3A",
+    "@": "%40",
+    "&": "%26",
+    "=": "%3D",
+    "+": "%2B",
+    "$": "%24",
+    ",": "%2C",
+    "/": "%2F",
+    "?": "%3F",
+    "#": "%23",
+    "[": "%5B",
+    "]": "%5D",
+  );
+  $new: $string;
+  @each $search, $replace in $map {
+    $new: #{svg-str-replace($new, $search, $replace)};
+  }
+  @return $new;
+}
+
+@function inline-svg($string) {
+  @return url("data:image/svg+xml;utf8,#{svg-url-encode($string)}");
+}
+
+vimeo-embed {
+  // CSS Variables for customization
+  --video-aspect-ratio: 56.25%; // Default 16:9
+  --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);
+
+  display: block;
+  position: relative;
+  width: 100%;
+  padding-top: var(--video-aspect-ratio);
+  overflow: hidden;
+  background-color: #000;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    object-fit: var(--video-object-fit);
+  }
+
+  // Poster image
+  .vimeo-poster,
+  .video-poster {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--poster-object-fit);
+    display: block;
+    cursor: pointer;
+  }
+
+  // Custom control overlay
+  .button-overlay {
+    background: var(--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;
+  }
+
+  &.is-playing .button-overlay {
+    opacity: 0;
+  }
+
+  &.is-playing:hover .button-overlay {
+    opacity: 1;
+  }
+
+  .button-overlay .button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--control-button-size);
+    width: var(--control-button-size);
+    background-image: inline-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>'
+    );
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &.is-playing .button-overlay .button {
+    background-image: inline-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>'
+    );
+  }
+
+  // Background mode styles
+  &.is-background {
+    padding-top: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    overflow: hidden;
+    background: #000;
+
+    iframe {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+
+      @supports (aspect-ratio: 16 / 9) {
+        aspect-ratio: 16 / 9;
+      }
+
+      pointer-events: none;
+    }
+
+    .button-overlay {
+      display: none;
+    }
+  }
+
+  // When background controls are enabled
+  &.has-background-controls {
+    .button-overlay {
+      display: flex;
+      background: none;
+      justify-content: flex-end;
+      align-items: flex-end;
+      padding: 1rem;
+
+      .button {
+        --control-button-size: 40px;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.is-playing .button-overlay {
+      opacity: 0;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Error message styling
+  .vimeo-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;
+
+    .error-content {
+      text-align: center;
+      padding: 2rem;
+      max-width: 400px;
+
+      svg {
+        color: #00adef;
+        margin-bottom: 1rem;
+      }
+
+      .error-message {
+        margin: 1rem 0;
+        font-size: 1rem;
+        line-height: 1.5;
+      }
+
+      .retry-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        background: #00adef;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background 0.2s ease;
+
+        &:hover {
+          background: #0088bf;
+        }
+
+        &:focus {
+          outline: 2px solid white;
+          outline-offset: 2px;
+        }
+      }
+    }
+  }
+}

package/src/styles/youtube-embed.scss

@@ -0,0 +1,261 @@
+/**
+* SVG encoding functions
+*/
+@function svg-str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      svg-str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+  @return $string;
+}
+
+@function svg-url-encode($string) {
+  $map: (
+    "%": "%25",
+    "<": "%3C",
+    ">": "%3E",
+    " ": "%20",
+    "!": "%21",
+    "*": "%2A",
+    "'": "%27",
+    '"': "%22",
+    "(": "%28",
+    ")": "%29",
+    ";": "%3B",
+    ":": "%3A",
+    "@": "%40",
+    "&": "%26",
+    "=": "%3D",
+    "+": "%2B",
+    "$": "%24",
+    ",": "%2C",
+    "/": "%2F",
+    "?": "%3F",
+    "#": "%23",
+    "[": "%5B",
+    "]": "%5D",
+  );
+  $new: $string;
+  @each $search, $replace in $map {
+    $new: #{svg-str-replace($new, $search, $replace)};
+  }
+  @return $new;
+}
+
+@function inline-svg($string) {
+  @return url("data:image/svg+xml;utf8,#{svg-url-encode($string)}");
+}
+
+youtube-embed {
+  // CSS Variables for customization
+  --video-aspect-ratio: 56.25%; // Default 16:9
+  --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);
+
+  display: block;
+  position: relative;
+  width: 100%;
+  padding-top: var(--video-aspect-ratio);
+  overflow: hidden;
+  background-color: #000;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    object-fit: var(--video-object-fit);
+  }
+
+  // Poster image (now appended directly to element)
+  .youtube-poster,
+  .video-poster {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--poster-object-fit);
+    display: block;
+    cursor: pointer;
+  }
+
+  // Custom control overlay (when controls=false)
+  .button-overlay {
+    background: var(--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;
+  }
+
+  &.is-playing .button-overlay {
+    opacity: 0;
+  }
+
+  &.is-playing:hover .button-overlay {
+    opacity: 1;
+  }
+
+  .button-overlay .button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--control-button-size);
+    width: var(--control-button-size);
+    background-image: inline-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>'
+    );
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &.is-playing .button-overlay .button {
+    background-image: inline-svg(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>'
+    );
+  }
+
+  // Background mode styles
+  &.is-background {
+    padding-top: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    overflow: hidden;
+    background: #000;
+
+    iframe {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      // Using min-width and min-height with larger percentage to ensure coverage
+      // This technique makes the video always cover the container
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+
+      // For 16:9 video: make it large enough to cover any aspect ratio container
+      @supports (aspect-ratio: 16 / 9) {
+        aspect-ratio: 16 / 9;
+        // If container is wider, video height = 100% and width expands
+        // If container is taller, video width = 100% and height expands
+      }
+
+      pointer-events: none;
+    }
+
+    .button-overlay {
+      display: none;
+    }
+  } // When background controls are enabled
+  &.has-background-controls {
+    .button-overlay {
+      display: flex;
+      background: none;
+      // Position controls in the bottom right
+      justify-content: flex-end;
+      align-items: flex-end;
+      padding: 1rem;
+
+      .button {
+        // Smaller, more discreet button
+        --control-button-size: 40px;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    // Hide the button when playing, but show on hover
+    &.is-playing .button-overlay {
+      opacity: 0;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Error message styling
+  .youtube-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;
+
+    .error-content {
+      text-align: center;
+      padding: 2rem;
+      max-width: 400px;
+
+      svg {
+        color: #ff4444;
+        margin-bottom: 1rem;
+      }
+
+      .error-message {
+        margin: 1rem 0;
+        font-size: 1rem;
+        line-height: 1.5;
+      }
+
+      .retry-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        background: #ff0000;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background 0.2s ease;
+
+        &:hover {
+          background: #cc0000;
+        }
+
+        &:focus {
+          outline: 2px solid white;
+          outline-offset: 2px;
+        }
+      }
+    }
+  }
+}