fix(video): support YouTube short URLs (youtu.be)

kolkov · kolkov · commit 4aa83974f7eb · 2025-11-22T04:36:51.000+03:00
Fixes #557, #554 YouTube share links (youtu.be/ID) were not recognized, only full URLs (youtube.com/watch?v=ID) worked. Changes: - Add youtu.be URL pattern matching - Improve video ID parsing to handle both formats - Strip query parameters from short URLs (e.g., ?si=...) - Also fixes parameter handling in full URLs (e.g., &feature=...) Now supports: - https://www.youtube.com/watch?v=VIDEO_ID - https://www.youtube.com/watch?v=VIDEO_ID&feature=share - https://youtu.be/VIDEO_ID - https://youtu.be/VIDEO_ID?si=XXXXX
diff --git a/projects/angular-editor/src/lib/angular-editor.service.ts b/projects/angular-editor/src/lib/angular-editor.service.ts
@@ -189,7 +189,7 @@ export class AngularEditorService {
   }
 
   insertVideo(videoUrl: string) {
-    if (videoUrl.match('www.youtube.com')) {
+    if (videoUrl.match('www.youtube.com') || videoUrl.match('youtu.be')) {
       this.insertYouTubeVideoTag(videoUrl);
     }
     if (videoUrl.match('vimeo.com')) {
@@ -198,7 +198,13 @@ export class AngularEditorService {
   }
 
   private insertYouTubeVideoTag(videoUrl: string): void {
-    const id = videoUrl.split('v=')[1];
+    // Support both formats: youtube.com/watch?v=ID and youtu.be/ID
+    let id: string;
+    if (videoUrl.includes('youtu.be/')) {
+      id = videoUrl.split('youtu.be/')[1].split('?')[0];
+    } else {
+      id = videoUrl.split('v=')[1].split('&')[0];
+    }
     const imageUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
     const thumbnail = `
       <div style='position: relative'>
