Video Preview Bug & Suggested Fix

[smcnaught]

The problem: Video preview not displaying.

The cause: When someone has ad block turned on in their browser and they copy a video link from YouTube, it includes &ab_channel=mychannel at the end of the link. This is breaking the video preview.

The solution: Before the user clicks 'OK' to add a new video, trim the url to remove &ab_channel=mychannel. (see code below)

[kolkov]

Thank you for the excellent bug report and proposed fix! You're absolutely right - the &ab_channel= parameter breaks YouTube video ID extraction.

Current Code Issue:

The video ID extraction assumes the URL format:

https://www.youtube.com/watch?v=VIDEO_ID

But with ad block, YouTube adds:

https://www.youtube.com/watch?v=VIDEO_ID&ab_channel=ChannelName

Proposed Fix:

In projects/angular-editor/src/lib/angular-editor.service.ts:

private insertYouTubeVideoTag(url: string): void {
  const id = url.split('v=')[1]?.split('&')[0]; // Take only ID before first &
  if (!id) return;
  
  const thumbnailUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
  const iframe = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe>`;
  this.insertHtml(iframe);
}

Or use more robust URL parsing:

private extractYouTubeId(url: string): string | null {
  const urlParams = new URLSearchParams(new URL(url).search);
  return urlParams.get('v');
}

Note: This was partially addressed in v3.0.2 which added support for YouTube short URLs (youtu.be/), but the &ab_channel= parameter issue remains.

Would you like to submit a Pull Request with this fix?

This is a good first issue - the fix is straightforward and well-defined!

Labeling as bug + good first issue + help wanted.

Reference: projects/angular-editor/src/lib/angular-editor.service.ts:200-217