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.

This commit is contained in:
Will Miao
2025-06-10 06:42:50 +08:00
parent 18cdaabf5e
commit a295ff2e06
5 changed files with 100 additions and 38 deletions

View File

@@ -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">
<iframe src="https://www.youtube.com/embed/hvKw31YpE-U"
title="Getting Started with LoRA Manager"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="video-container">
<div class="video-thumbnail" data-video-id="hvKw31YpE-U">
<img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
<div class="video-play-overlay">
<a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
<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">
<iframe src="https://www.youtube.com/embed/videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj"
title="LoRA Manager Updates"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="video-container">
<div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
<img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
<div class="video-play-overlay">
<a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
<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>