Embedding a Youtube Short into a Retool App

Retool Tips & Tricks
,
1

Hey Retool Community -

Just wanted to share a quick tip if you want to embed a Youtube Short into a Retool App using the Video component.

Unlike other Youtube URLs, Youtube Shorts will not load up in a Video component. They will be of the following format: https://www.youtube.com/shorts/<IDENTIFIER STRING>

If you replace shorts with embed in the URL, the Short will load without any issues in the Video component.
https://www.youtube.com/embed/<IDENTIFIER STRING>

CleanShot 2024-06-07 at 13.30.26@2x
CleanShot 2024-06-07 at 13.30.26@2x1920×624 73.9 KB

4 Likes
2

Right! Just had to do this. I'm sure you could do a regex replace through the UI, but we had to do a few other things, so built this into a 'run script' event handler, in case it helps save somebody a few minutes when they need to account for both shorts and other urls:

const transformedURL = (url) => {
  return url.includes('youtube.com/shorts/') ? url.replace('youtube.com/shorts/', 'youtube.com/embed/') : url;
};

Then just use transformedURL for your value.

2 Likes