YouTube thumbnail from link

Ideas & Product Feedback
1

Hello!

When adding a YouTube link, I would like to display the thumbnail of that link. Is there a way to do it simply by putting in the link and not storing anything on Tadabase?

2

Here’s what ChatGPT told me:

Yes, you can display a YouTube video thumbnail dynamically from just the video URL in Tadabase using a formula field or JavaScript without storing the image. Here’s how:

:white_check_mark: How YouTube Thumbnails Work

Every YouTube video has a predictable thumbnail URL pattern based on its video ID.

Thumbnail URL pattern:

https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg

:white_check_mark: Steps in Tadabase (No File Storage Required)

Option 1: Using a Formula Field (Recommended if static display is fine)

If your YouTube URL is stored in a field called {YouTube URL}, create a new formula field like this:

"https://img.youtube.com/vi/" & SPLIT(SPLIT({YouTube URL}, "v=", 1), "&", 0) & "/hqdefault.jpg"

:brain: This works only for standard YouTube links like https://www.youtube.com/watch?v=VIDEO_ID.

If your URLs might include short links (youtu.be/...), use JavaScript instead.

Option 2: Using JavaScript in a Details Component

Place this in the Page Settings → JavaScript section:

$(document).ready(function() {
  var url = $('[data-field="YouTube URL"]').text().trim();
  var videoId = '';

  if (url.includes('youtu.be/')) {
    videoId = url.split('youtu.be/')[1].split('?')[0];
  } else if (url.includes('v=')) {
    videoId = url.split('v=')[1].split('&')[0];
  }

  if (videoId) {
    var imgUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
    $('[data-field="YouTube URL"]').html(`<img src="${imgUrl}" alt="Video Thumbnail" style="max-width:100%;">`);
  }
});

:arrows_counterclockwise: Replace data-field="YouTube URL" with the actual field selector or label used on your page.

:dart: Bonus: Make Thumbnail Clickable

Want users to click the thumbnail to open the video?

Update the last line of JavaScript to:

$('[data-field="YouTube URL"]').html(`<a href="${url}" target="_blank"><img src="${imgUrl}" alt="Video Thumbnail" style="max-width:100%;"></a>`);

Let me know if you want to support different layouts or customize the style.