Youtube short url

Need help
1

I have found a few posts about this, the video element doesn’t show youtube videos when it is given the youtube short code. It apparently does if you give it just the id (I haven’t tested that), and it does if you give it the full URL.

The Youtube app has a handy copy button for the video link which copies the short URL. This is what most users will copy as its the easiest way for them to do this, or to get the link from the upload/edit.

Asking users to either - decode this to get the ID, or click though to get the full URL feels like making them jump through unnecessary hoops.

This has been ongoing for a number of years looking at the posts I have found on the forum.

Is there a way round this, or is Bubble ever going to change and support this?

2

Yes. The short URL is just a redirect but both use the same video ID.

youtu.be/[videoId] → https://www.youtube.com/watch?v=[videoId]

So the easy workaround is to accept whatever the user pastes → do a simple find/replace before passing it to the video element.

For example, if the value contains youtu.be/, replace it with https://www.youtube.com/watch?v=.

1 Like
4

This! Simple as that. But keep in mind all youtube links such as shorts, lives etc

All of them work with "youtube.com/watch?v=ID-here"

5

Try the regex approach to extract the video id from the short url first, then feed that to the video element instead. most devs use a regex like [^/]+$ to grab the id from youtu.be urls, then pass that to the element.

6

It seems to be working with a split by “/” and last item

Thanks everyone