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?
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?
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:
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
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"
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.
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%;">`);
}
});
Replace
data-field="YouTube URL"
with the actual field selector or label used on your page.
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.