diff --git a/.env.example b/.env.example
index 26050b7..e0a1ee0 100644
--- a/.env.example
+++ b/.env.example
@@ -68,26 +68,6 @@ AI_EMBEDDINGS_MODEL=mistral-embed
# User rate limiting (queries per minute)
AI_RATE_LIMIT_MAX_REQUESTS=4
-# ============================================================================
-# 🎥 VIDEO EMBEDDING - PRODUCTION CONFIGURATION
-# ============================================================================
-
-# Enable local caching of Nextcloud videos (highly recommended)
-VIDEO_CACHE_ENABLED=true
-
-# Directory for cached videos (ensure it's writable and has sufficient space)
-# This directory will grow over time as videos are cached permanently
-VIDEO_CACHE_DIR=./cache/videos
-
-# Emergency cleanup threshold in MB - videos are cached indefinitely
-# Only triggers cleanup when approaching this limit to prevent disk full
-# Recommended: 2000MB (2GB) for small deployments, 5000MB+ for larger ones
-VIDEO_CACHE_MAX_SIZE=2000
-
-# Maximum individual video file size for caching in MB
-# Videos larger than this will stream directly without caching
-VIDEO_MAX_SIZE=200
-
# ============================================================================
# CACHING BEHAVIOR
# ============================================================================
diff --git a/src/components/Video.astro b/src/components/Video.astro
deleted file mode 100644
index 4e16902..0000000
--- a/src/components/Video.astro
+++ /dev/null
@@ -1,46 +0,0 @@
----
-// src/components/Video.astro - SIMPLE responsive video component
-export interface Props {
- src: string;
- title?: string;
- controls?: boolean;
- autoplay?: boolean;
- muted?: boolean;
- loop?: boolean;
- aspectRatio?: '16:9' | '4:3' | '1:1';
- preload?: 'none' | 'metadata' | 'auto';
-}
-
-const {
- src,
- title = 'Video',
- controls = true,
- autoplay = false,
- muted = false,
- loop = false,
- aspectRatio = '16:9',
- preload = 'metadata'
-} = Astro.props;
-
-const aspectClass = `aspect-${aspectRatio.replace(':', '-')}`;
----
-
-
-
- {title !== 'Video' && (
-
- )}
-
\ No newline at end of file
diff --git a/src/styles/knowledgebase.css b/src/styles/knowledgebase.css
index 6537109..b3139f4 100644
--- a/src/styles/knowledgebase.css
+++ b/src/styles/knowledgebase.css
@@ -691,12 +691,11 @@
/* ==========================================================================
- VIDEO EMBEDDING - Add to knowledgebase.css
+ VIDEO EMBEDDING - ULTRA SIMPLE: Just full width, natural aspect ratios
========================================================================== */
-/* Video Container and Responsive Wrapper */
+/* Video Container - just a styled wrapper */
:where(.markdown-content) .video-container {
- position: relative;
width: 100%;
margin: 2rem 0;
border-radius: var(--radius-lg, 0.75rem);
@@ -705,84 +704,34 @@
box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,0.16));
}
-/* Responsive 16:9 aspect ratio by default */
-:where(.markdown-content) .video-container.aspect-16-9 {
- aspect-ratio: 16 / 9;
-}
-
-:where(.markdown-content) .video-container.aspect-4-3 {
- aspect-ratio: 4 / 3;
-}
-
-:where(.markdown-content) .video-container.aspect-1-1 {
- aspect-ratio: 1 / 1;
-}
-
-/* Video Element Styling */
+/* Video Element - full width, natural aspect ratio */
:where(.markdown-content) .video-container video {
width: 100%;
- height: 100%;
- object-fit: contain;
+ height: auto;
+ display: block;
background-color: #000;
border: none;
outline: none;
}
-/* Custom Video Controls Enhancement */
-:where(.markdown-content) video::-webkit-media-controls-panel {
- background-color: rgba(0, 0, 0, 0.8);
+/* YouTube iframe - full width, preserve embedded dimensions ratio */
+:where(.markdown-content) .video-container iframe {
+ width: 100%;
+ height: auto;
+ aspect-ratio: 16 / 9; /* Only for iframes since they don't have intrinsic ratio */
+ display: block;
+ border: none;
+ outline: none;
}
-:where(.markdown-content) video::-webkit-media-controls-current-time-display,
-:where(.markdown-content) video::-webkit-media-controls-time-remaining-display {
- color: white;
- text-shadow: none;
+/* Focus states for accessibility */
+:where(.markdown-content) .video-container video:focus,
+:where(.markdown-content) .video-container iframe:focus {
+ outline: 3px solid var(--color-primary);
+ outline-offset: 3px;
}
-/* Video Loading State */
-:where(.markdown-content) .video-container .video-loading {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: var(--color-text-secondary);
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1rem;
-}
-
-:where(.markdown-content) .video-container .video-loading .spinner {
- width: 2rem;
- height: 2rem;
- border: 3px solid var(--color-border);
- border-top: 3px solid var(--color-primary);
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-/* Video Error State */
-:where(.markdown-content) .video-container .video-error {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- color: var(--color-error, #dc3545);
- padding: 2rem;
-}
-
-:where(.markdown-content) .video-container .video-error .error-icon {
- font-size: 3rem;
- margin-bottom: 1rem;
-}
-
-/* Video Metadata Overlay */
+/* Video Metadata */
:where(.markdown-content) .video-metadata {
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
@@ -796,69 +745,13 @@
:where(.markdown-content) .video-metadata .video-title {
font-weight: 600;
color: var(--color-text);
- margin-bottom: 0.5rem;
-}
-
-:where(.markdown-content) .video-metadata .video-info {
- display: flex;
- gap: 1rem;
- flex-wrap: wrap;
- align-items: center;
-}
-
-:where(.markdown-content) .video-metadata .video-duration,
-:where(.markdown-content) .video-metadata .video-size,
-:where(.markdown-content) .video-metadata .video-format {
- display: flex;
- align-items: center;
- gap: 0.25rem;
-}
-
-/* Fullscreen Support */
-:where(.markdown-content) .video-container video:fullscreen {
- background-color: #000;
-}
-
-:where(.markdown-content) .video-container video:-webkit-full-screen {
- background-color: #000;
-}
-
-:where(.markdown-content) .video-container video:-moz-full-screen {
- background-color: #000;
-}
-
-/* Video Thumbnail/Poster Styling */
-:where(.markdown-content) .video-container video[poster] {
- object-fit: cover;
-}
-
-/* Protected Video Overlay */
-:where(.markdown-content) .video-container .video-protected {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.8);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: white;
- text-align: center;
- padding: 2rem;
-}
-
-:where(.markdown-content) .video-container .video-protected .lock-icon {
- font-size: 3rem;
- margin-bottom: 1rem;
- opacity: 0.8;
+ margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
:where(.markdown-content) .video-container {
- margin: 1.5rem -0.5rem; /* Extend to edges on mobile */
+ margin: 1.5rem -0.5rem;
border-radius: 0;
}
@@ -867,15 +760,9 @@
font-size: 0.8125rem;
border-radius: 0;
}
-
- :where(.markdown-content) .video-metadata .video-info {
- flex-direction: column;
- gap: 0.5rem;
- align-items: flex-start;
- }
}
-/* Dark Theme Adjustments */
+/* Dark Theme */
[data-theme="dark"] :where(.markdown-content) .video-container {
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
@@ -885,48 +772,23 @@
border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}
-/* Video Caption/Description Support */
-:where(.markdown-content) .video-caption {
- margin-top: 1rem;
- font-size: 0.9375rem;
- color: var(--color-text-secondary);
- text-align: center;
- font-style: italic;
- line-height: 1.5;
-}
-
-/* Video Gallery Support (multiple videos) */
-:where(.markdown-content) .video-gallery {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- margin: 2rem 0;
-}
-
-:where(.markdown-content) .video-gallery .video-container {
- margin: 0;
-}
-
-/* Accessibility Improvements */
-:where(.markdown-content) .video-container video:focus {
- outline: 3px solid var(--color-primary);
- outline-offset: 3px;
-}
-
-/* Print Media - Hide Videos */
+/* Print Media */
@media print {
:where(.markdown-content) .video-container {
+ border: 2px solid #ddd;
+ background-color: #f5f5f5;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ :where(.markdown-content) .video-container video,
+ :where(.markdown-content) .video-container iframe {
display: none !important;
}
- :where(.markdown-content) .video-container::after {
- content: "[Video: " attr(data-video-title, "Embedded Video") "]";
+ :where(.markdown-content) .video-container::before {
+ content: "📹 Video: " attr(data-video-title, "Embedded Video");
display: block;
- padding: 1rem;
- background-color: #f5f5f5;
- border: 1px solid #ddd;
- text-align: center;
- font-style: italic;
- color: #666;
+ font-weight: 600;
}
}
\ No newline at end of file
diff --git a/src/utils/remarkVideoPlugin.ts b/src/utils/remarkVideoPlugin.ts
index 5f0f596..11207f8 100644
--- a/src/utils/remarkVideoPlugin.ts
+++ b/src/utils/remarkVideoPlugin.ts
@@ -1,39 +1,49 @@
-// src/utils/remarkVideoPlugin.ts
+// src/utils/remarkVideoPlugin.ts - SIMPLIFIED: Basic video and iframe enhancement only
import { visit } from 'unist-util-visit';
import type { Plugin } from 'unified';
import type { Root } from 'hast';
+function escapeHtml(unsafe: string): string {
+ if (typeof unsafe !== 'string') return '';
+
+ return unsafe
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
export const remarkVideoPlugin: Plugin<[], Root> = () => {
return (tree: Root) => {
+ // Process video tags
visit(tree, 'html', (node: any, index: number | undefined, parent: any) => {
if (node.value && node.value.includes('