DEV Community

Cover image for Spotify embedded link on HTML
Oscar Guzman
Oscar Guzman

Posted on

3

Spotify embedded link on HTML

A simple embedded Link can draw your visitor's attention to some important part of your interface. You can also use these animations to make your website look more interesting!

For starters, I'll show the CSS since it's self-explanatory.

Alt Text

Now to actually see it, You will need to add the correct tag to link it.

Alt Text

We usually have our CSS in a separate file ending with '.css' but with these specifics, we will need it inside the HTML tag itself.

"frameborder"

  • The frame border attribute specifies whether or not to display a border around a frame.
  • They only have 2 values

Alt Text

"allowtransparency"

  • the allow transparency attribute of the IFRAME element specifies whether to allow a transparent background in the iframe.
  • boolean (true or false)

"allow=encrypted-media"

  • Extensions provide an API that enables web applications to interact with content protection systems, to allow playback of encrypted audio and video

In the end, it should look like this!

Alt Text

example use: https://oscar18guzman.github.io/tunes/ForHerPage/for_her.html

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (4)

Collapse
 
christianguzman profile image
Christian Guzman

Thank you! Great post. Definitely gives me some ideas for future projects.

Collapse
 
oscar18guzman profile image
Oscar Guzman

I am glad to take a part of your inspiration thank you!

Collapse
 
jiddyy profile image
JD Gault

This was a very good post. You hit a lot of good points and explained it all very well. Good work!

Collapse
 
oscar18guzman profile image
Oscar Guzman

Glad You enjoyed it

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️