CODEWITHSUNDEEP
javascripthtmlformsiframe
PYP
PYP

Reputation: 125

Add a Spotify link in an HTML form

It's pretty easy to copy a Spotify song URL and generate the required iframe code to paste into your own HTML code, e.g:

<iframe src="https://open.spotify.com/embed/track/1q8gelFgFYUwoWpQV7WNCe" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

just for others' reference, details of how to do this can be found at https://developer.spotify.com/documentation/widgets/generate/play-button/

However, the question I have is about allowing a user to paste this same code into an HTML form, to allow it to show on a user's profile page. The only ways I can think of doing this currently are either:

  1. Use an tag and ask the user to first remove the and " from the link before pasting (e.g. https://open.spotify.com/embed/track/1q8gelFgFYUwoWpQV7WNCe" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media). Then, using the pasted text as a variable between tags. This method is not preferred as requires action from the user.

  2. Allow the user to paste the entire link, then use a function to remove the /", before following the same approach of using the code as a variable.

Is there a more straightforward approach I am missing here? Is there a way the entire <iframe> code can be pasted into a form to directly appear on the user's profile?

Thanks in advance for any assistance.

Upvotes: 1

Views: 4302

Answers (1)

Hlib Liapota
Hlib Liapota

Reputation: 178

Better approach considering user experience would be ask user to paste spotify uri (using button "Copy Spotify URI") After that you can format that URI using script to get this part spotify:track:1NpSdOfFA7XPpEKlTV4OTr

Then just put that formatted part here: enter image description here

Upvotes: 1

Related Questions