Allow users to embed YouTube/Soundcloud links + preview?

Need help Database
1

Hi! I’m creating a music kind of app where I want users to be able to save their favorite tunes from YouTube and possibly Soundcloud (and Bandcamp). I want them to be able to drop a link in and we are able to see the piece of music and interact with it – like an embed – you can listen to the song via the app being made.

There’s more functionality of course but I just want to know if this is possible – I want them to be able to save it as well.

2

This is definitely possible with Bubble. Give me some time and I could make you a demo.

3

Here you go, the demo shows how to display the embedded player from a link.


2 Likes
4

@marcusandrews - I had the same issue and this worked perfectly for me - thanks heaps. I’ve never used the find and replace thing before - It’s definitely gonna come in handy for other things too.

1 Like
5

Great, glad it helped :smiley:

6

Just noticed that my SoundCloud HTML embedding only seems to work on desktop.

On mobile browsers the soundcloud player is grey/faded and when you click play on it, it doesn’t play but instead opens the soundcloud app.

YouTube HTML embedding is fine on mobile browser though.

@marcusandrews - Any ideas?

7

These examples seem to be blank, unless I’m viewing them wrong? :thinking: Are these still working demos of how to display the embedded player from a link? I’d love to check them out :innocent:

8

Hi @marcusandrews ! Would your old solution here still work? Right now I just tried clicking on the example and I’m only seeing the link but was thinking if the actual embed code was stuck in it might work? I’m trying to see how multiple Soundcloud embed codes could be saved to database and shown via a repeating group?

Thanks in advance!

EDIT: Ok so I tried playing around with what Marcus did with his example and I think I found 50% of the answer. First as mentioned earlier, you can go to any soundcloud song and hit the share button and there you’ll find the embed code. From there I copy and paste that code into the area that Marcus had labeled Input A. Then in the HTML A box, I change it to InputA’s value and voila it works! The 1 problem I’m having now (which I’m hoping is simple) is:

  1. How to set this up to pull data from the database? In Marcus’ example, it’s just a simple “InputA’s value” but if I’ve got a repeating group, would it be Parent’s group InputA or something like that?

Thanks in advance!

EDIT #2: Solved. Basically just create an html element. In html editor, connect it to the parent group’s (whatever you want) field in your database so long as it’s a text box and you’re good.