Samuella Onaiwu's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Some HTML Codes for anyone who wants to add music.

Psychedelic Pointer

I just want to add some HTML codes for anyone who wants to add music to their profiles. You can add it to your profile, blogs, and your layouts as well.ย 

If it doesn't work feel free to comment.ย 
(replace the xxxxx with the end part after the / of the links)


For anyone that wants music to play on the background:
<iframe width="0" height="0" src="https://www.youtube.com/embed/XXXXX//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>


For anyone who wants to add music videos from Youtube:
Go to the video you want, go to share and click embed. After that copy it and paste it onto your profile.
It should be like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

</iframe>


For anyone who wants to add music from their Spotify:
Go to a song or a playlist and embed it. After that copy and paste to profile.
It should be like this:
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/xxxxxxxxxx?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">

</iframe>


For anyone who wants to add music from their Soundcloud:
Go to a song or a playlist and embed it. After that copy and paste to profile.
It should be like this:
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/31298224&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/nesha-slaughter" title="Nesha Slaughter" target="_blank" style="color: #cccccc; text-decoration: none;">Nesha Slaughter</a> ยท <a href="https://soundcloud.com/nesha-slaughter/say-yes-lil-corey-1" title="Say Yes-Lil Corey-1" target="_blank" style="color: #cccccc; text-decoration: none;">Say Yes-Lil Corey-1</a></div>


Hope this helps you ๐Ÿ’•




20 Kudos

Comments

Displaying 6 of 6 comments ( View all | Add Comment )

melanie

melanie's profile picture

life saver omg


Report Comment

carcinoGeneticist

carcinoGeneticist's profile picture

for the background it doesn't work


Report Comment

incubuslvr

incubuslvr's profile picture

OMGGGGGG THANK YOU IVE BEEN SEARCHING FOR AN HOUR FOR HMTLs YOU ARE HEAVEN SENT


Report Comment

jaelynthehuman

jaelynthehuman's profile picture

TYSM!! THIS HELPED ALOT


Report Comment

xXL1nkXx

xXL1nkXx's profile picture

Is there anyway to get the song to loop in the background?


Report Comment

Thegoodolddays

Thegoodolddays's profile picture

I'm trying to have a song play on my profile, but this method isn't working. The text looks like this:



I replaced the XXXXs with the end of the youtube link after the // like you said, and put it in the "about me" section with my layout, but it doesn't work. Any idea what I'm doing wrong?


Report Comment



Oop never mind I just figured it out! On the youtube video you have to hit "share" then "embed", then copy the end of the link after the // and paste it where the XXXXs are. It works now! Yay! :D

by Thegoodolddays; ; Report