Refactor video embed implementation to enhance privacy and user experience; replace iframe with a privacy-friendly video container and add external link buttons for YouTube access.

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-lora-manager"
 description = "LoRA Manager for ComfyUI - Access it at http://localhost:8188/loras for managing LoRA models with previews and metadata integration."
-version = "0.8.17"
+version = "0.8.17-bugfix"
 license = {file = "LICENSE"}
 dependencies = [
     "aiohttp",

static/css/components/modal.css

@@ -783,30 +783,6 @@ input:checked + .toggle-slider:before {
   display: block;
 }
 
-/* Video embed styles */
-.video-embed {
-  position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio */
-  height: 0;
-  overflow: hidden;
-  max-width: 100%;
-  margin-bottom: var(--space-2);
-  border-radius: var(--border-radius-sm);
-}
-
-.video-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.video-embed.small {
-  max-width: 100%;
-  margin-bottom: var(--space-1);
-}
-
 .help-text {
   margin: var(--space-2) 0;
 }
@@ -972,4 +948,82 @@ input:checked + .toggle-slider:before {
 [data-theme="dark"] .warning-box {
   background-color: rgba(255, 193, 7, 0.05);
   border-color: rgba(255, 193, 7, 0.3);
+}
+
+/* Privacy-friendly video embed styles */
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  margin-bottom: var(--space-2);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.video-thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.video-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter 0.2s ease;
+}
+
+.video-play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s ease;
+}
+
+/* External link button styles */
+.external-link-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border-radius: var(--border-radius-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: var(--lora-accent);
+  color: white;
+  text-decoration: none;
+  border: none;
+}
+
+.external-link-btn:hover {
+  background-color: oklch(from var(--lora-accent) l c h / 85%);
+}
+
+.video-thumbnail i {
+  font-size: 1.2em;
+}
+
+/* Smaller video container for the updates tab */
+.video-item .video-container {
+  padding-bottom: 40%; /* Shorter height for the playlist */
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .video-container {
+  background-color: rgba(255, 255, 255, 0.03);
 }

templates/components/modals.html

@@ -482,12 +482,16 @@
             <!-- Getting Started Tab -->
             <div class="tab-pane active" id="getting-started">
                 <h3>Getting Started with LoRA Manager</h3>
-                <div class="video-embed">
+                <div class="video-container">
-                    <iframe src="https://www.youtube.com/embed/hvKw31YpE-U" 
+                    <div class="video-thumbnail" data-video-id="hvKw31YpE-U">
-                            title="Getting Started with LoRA Manager" 
+                        <img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
-                            frameborder="0" 
+                        <div class="video-play-overlay">
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                            <a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
-                            allowfullscreen></iframe>
+                                <i class="fas fa-external-link-alt"></i>
+                                <span>Watch on YouTube</span>
+                            </a>
+                        </div>
+                    </div>
                 </div>
                 <div class="help-text">
                     <h4>Key Features:</h4>
@@ -514,12 +518,16 @@
                 </h3>
                 <div class="video-list">
                     <div class="video-item">
-                        <div class="video-embed small">
+                        <div class="video-container">
-                            <iframe src="https://www.youtube.com/embed/videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" 
+                            <div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
-                                    title="LoRA Manager Updates" 
+                                <img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
-                                    frameborder="0" 
+                                <div class="video-play-overlay">
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                    <a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
-                                    allowfullscreen></iframe>
+                                        <i class="fas fa-external-link-alt"></i>
+                                        <span>Watch on YouTube</span>
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                         <div class="video-info">
                             <h4>LoRA Manager Updates Playlist</h4>
@@ -528,7 +536,7 @@
                     </div>
                 </div>
             </div>
-            
+
             <!-- Documentation Tab -->
             <div class="tab-pane" id="documentation">
                 <h3>Documentation</h3>