Report Blog Entry
The original design: mini music player ! by https://spacehey.com/girlvomit
I wanted a more customizable design for the music player so I made some. They're just backups for me but you can use and change them up if you want. :)
Resources
Play Buttons: https://icons8.com/icons/set/play-button
Gifs: https://giphy.com/search/background
_________________________________________________
As for the youtube link, this is the code. Just replace the bolded text with the link. To get the link, click "share" on the video you want then the "embed" option. Copy the link up to the ? question mark:
<iframe allowfullscreen="" src="https://www.youtube.com/embed/d9IxdwEFk1c//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
None are set to autoplay. this is the code to make it autoplay:
<iframe allowfullscreen="" src="https://www.youtube.com/embed/_Drfcw8f3Bs?si=WViUuYAMJcIEy9LN//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy"></iframe>
Pink
Palette(팔레트) (Feat. G-DRAGON)
IU
<style>
/* main div */
#melody {
background: linear-gradient(135deg, #ffc0cb, #ffb6c1);
border: 2px solid #ff69b4;
border-radius: 8px;
box-shadow: 0 0 10px #ffb6c1;
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
border-bottom: 10px solid transparent;
border-left: 16px solid #ff1493; /* rose pink triangle */
border-top: 10px solid transparent;
cursor: pointer;
filter: drop-shadow(0 0 2px #fff);
left: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0px;
opacity: 0.01; /* barely visible but clickable */
position: absolute;
top: 0px;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color: rgba(255,192,203,0.3);
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #fff;
cursor: default;
display: block;
font-family: "Comic Sans MS";
font-size: 14px;
height: 50%;
padding: 3px;
text-align: left;
text-shadow: 0 0 2px #ff69b4, 0 0 2px #ff1493;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/d9IxdwEFk1c//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Palette(팔레트) (Feat. G-DRAGON)</span>
<span class="artist">IU</span>
</div>
</div>
Black and Red #1
Supermassive Black Hole
Muse
<style>
/* main div */
#melody {
background: linear-gradient(135deg, #0d0d0d, #1a001a); /* black to deep purple gradient */
border: 2px solid #8b0000; /* dark blood red border */
border-radius: 8px;
box-shadow: 0 0 12px #4b0000, 0 0 20px #2e001f; /* crimson and purple glow */
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
border-bottom: 10px solid transparent;
border-left: 16px solid #ff0000; /* bright blood red triangle */
border-top: 10px solid transparent;
cursor: pointer;
filter: drop-shadow(0 0 3px #ff4b4b) drop-shadow(0 0 5px #660000);
height: 0;
left: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0px;
opacity: 0.01; /* barely visible but clickable */
position: absolute;
top: 0px;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color: black;
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #ff1a1a;
cursor: default;
display: block;
font-family: "Times New Roman";
font-size: 14px;
font-weight: bold;
height: 50%;
padding: 3px;
text-align: left;
text-shadow: 0 0 7px #ff4b4b, 0 0 10px red;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/rinkviEmeXk//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Supermassive Black Hole</span>
<span class="artist">Muse</span>
</div>
</div>
Blue and Yellow Round
Cookie Thumper
Die Antwoord
<style>
/* main div */
#melody {
align-items: center;
background: #A8F1FF;
border-radius: 30px;
box-shadow: 8px 8px 16px rgba(110, 230, 252, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.6);
display: flex;
font-family: "Arial", sans-serif;
height: 60px;
max-width: 320px;
overflow: hidden;
padding-left: 60px;
position: relative;
background-image: url('https://img.icons8.com/?size=1200&id=97693&format=png');
background-size: 20%;
background-repeat: no-repeat;
background-position: right;
}
/* Play Button */
#melody:after {
content: '';
align-items: center;
background: transparent; /* sunny yellow button */
border-radius: 50%;
box-shadow: 4px 4px 8px rgba(255, 255, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.6);
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
left: 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
}
/* Triangle inside play button */
#melody:before {
content: '';
border-bottom: 8px solid transparent;
border-left: 14px solid #4ED7F1;
border-top: 8px solid transparent;
height: 0;
left: 28px;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
}
/* the youtube music video in the background */
#melody iframe {
height: 60px;
left: 0px;
opacity: 0.01;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
/* div on top of youtube video */
#melody div {
cursor: default;
display: flex;
flex-direction: column;
justify-content: center;
margin-left:20px;
z-index: 2;
}
#melody span.song {
color: #4ED7F1;
font-size: 16px;
font-weight: bold;
}
#melody span.artist {
color: #FFFA8D;
font-size: 13px;
opacity: 0.9;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/GMUXTnPpePI//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" frameborder="0"></iframe>
<div>
<span class="song">Cookie Thumper</span>
<span class="artist">Die Antwoord</span>
</div>
</div>
Brown
Morning with Coffee
Warm Melody
<style>
/* main div */
#melody {
background: linear-gradient(135deg, #d2b48c, #c4a484);
border: 2px solid #5b3a29;
border-radius: 8px;
box-shadow: 0 0 12px rgba(91, 58, 41, 0.5);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
background-image: url('https://img.icons8.com/parakeet-line/48/play.png');
background-size: 100%100%;
background-repeat: no-repeat;
width:40px;
height:40px;
left:5px;
top:5px;
position:absolute;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0px;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0px;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color: rgba(245, 222, 179, 0.3);
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #3b2f2f;
cursor: default;
display: block;
font-family: "Verdana";
font-size: 14px;
font-weight: 600;
height: 50%;
padding: 3px;
text-align: left;
text-shadow: 0 0 1px #f5deb3, 0 0 2px #a0522d;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/O725nlDOM5c//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Morning with Coffee</span>
<span class="artist">Warm Melody</span>
</div>
</div>
Black and White #1
Black Swan
BTS
<style>
/* main div */
#melody {
background: linear-gradient(145deg, #1a1a1a, #0e0e0e);
border: 1px solid #2b2b2b;
border-radius: 0;
box-shadow: inset 2px 2px 5px #0a0a0a,
inset -2px -2px 6px #2c2c2c,
0 0 12px rgba(0,0,0,0.7);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
background-image: url('https://img.icons8.com/ios/50/FFFFFF/start--v2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 40px;
height: 40px;
left: 5px;
top: 5px;
position: absolute;
z-index: 1;
filter: drop-shadow(1px 1px 3px #000);
}
/* youtube video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 2;
}
#melody div {
background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2));
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
border-left: 1px solid #3a3a3a;
}
/* div for song name and artist */
#melody span {
color: #e0e0e0;
display: block;
font-family: "Georgia";
font-size: 14px;
font-weight: bold;
height: 50%;
letter-spacing: 2px;
padding: 4px;
text-shadow: 0 0 3px #000, 0 0 6px #333;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/TXYUhWdXt7k//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Black Swan</span>
<span class="artist">BTS</span>
</div>
</div>
Blush #1
My Heart Will Go On
Celine Dion
<style>
/* main div */
#melody {
background: linear-gradient(135deg, #f8d7e3, #dcdde1);
border-radius: 30px; /* rounded edges */
border: 2px solid #caa8b5;
box-shadow: 0 4px 10px rgba(200, 168, 181, 0.3);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
background-image: url('https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/caa8b5/external-play-button-arrow-flatart-icons-outline-flatarticons-1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
height: 40px;
left: 7px;
position: absolute;
top: 3px;
width: 40px;
z-index: 1;
}
/* the youtube video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 0 12px 12px 0; /* round the overlay’s right side */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #7a5b6e;
display: block;
font-family:"Arial";
font-size: 14px;
font-weight: 500;
height: 50%;
letter-spacing: 0.5px;
padding: 3px;
text-align: left;
text-shadow: 0 0 2px #ffffff;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/p79GmLNLMrY//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">My Heart Will Go On</span>
<span class="artist">Celine Dion</span>
</div>
</div>
Blush #2
It's All Coming Back to Me Now
Celine Dion
<style>
/* main div */
#melody {
background-color: MistyRose;
background-image: url('');
background-size: 70%;
border-radius: 30px; /* round border */
border: 2px solid hotpink;
box-shadow: 0 4px 10px rgba(300, 47, 75, 0.4);
height: 50px;
max-width: 305px;
outline-offset: -5px;
outline: 2px dotted deeppink;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
background-image: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExZjFsaGI3aHdiZWNvOGRnZ3cwaWtjNnM4OG1qajE5YWY3dTQ4bGh6diZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/nkiSXYxB9yp6yN3tKt/giphy.gif');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 50px;
left: 0px;
position: absolute;
top: 0px;
width: 50px;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 0; /* straight edges */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: deeppink;
display: block;
font-family: "Comic Sans MS";
font-size: 13px;
font-weight: 1;
height: 50%;
letter-spacing: 1px;
padding: 3px;
text-align: left;
text-shadow: 0 0 3px plum;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/qDneDYFM3fk//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">It's All Coming Back to Me Now </span>
<span class="artist">Celine Dion</span>
</div>
</div>
Loser Lover
LO$ER=LO♡ER
TXT
<style>
/* main div */
#melody {
background-color: black;
background-image: url('');
background-size: 70%;
border-radius: 15px; /* round border */
border: 2px solid #7E57F3;
box-shadow: 0 4px 10px rgba(138, 43, 226, 0.6);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
background-image: url('https://img.icons8.com/pulsar-line/48/7950F2/play.png');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(2px 1px 2px plum);
height: 30px;
width: 30px;
left: 15px;
top: 10px;
position: absolute;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color:transparent;
border-radius: 0;
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #784EEC;
display: block;
font-family: "Comic Sans MS";
font-size: 13px;
font-weight: 1;
height: 50%;
letter-spacing: 1px;
padding: 3px;
text-align: left;
text-shadow: 2px 1px 2px plum;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/9hDhqh7DlbA//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">LO$ER=LO♡ER</span>
<span class="artist">TXT</span>
</div>
</div>
Party #1
TiK ToK
Kesha
<style>
/* main div */
#melody {
background-color: black;
background-image: url('https://i.pinimg.com/originals/7d/09/a4/7d09a485cb23ebed6cb999e0f4302dd6.gif');
background-size: 20%;
border-image-slice: 27 20 27 20;
border-image-width: 5px 5px 5px 5px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch repeat;
border-image-source: url("https://i.pinimg.com/originals/5b/62/48/5b62482ee9032dbfeb447cf811bd644c.gif");
border-style: solid;
box-shadow: 0 4px 10px rgba(138, 43, 226, 0.6);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after{
content: '';
background-image: url('https://img.icons8.com/external-freebies-bomsymbols-/91/F25081/external-audio-doodle-audio-video-game-freebies-bomsymbols--20.png');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(2px 1px 2px blue);
height: 30px;
width: 30px;
left: 10px;
top: 6px;
position: absolute;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color:transparent;
border-radius: 0; /* straight edges */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: deeppink;
display: block;
font-family: "Tahoma";
font-size: 13px;
font-weight: bold;
height: 50%;
letter-spacing: 3px;
padding: 3px;
text-align: left;
text-shadow: 1px 1px 1px white;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/y5HdDYRYQjA//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">TiK ToK</span>
<span class="artist">Kesha</span>
</div>
</div>
XMAS #1
Jingle Bell Rock
Bobby Helms
<style>
/* main div */
#melody {
background-color: black;
border-image-slice: 160 160 160 160;
border-image-width: 10px 10px 10px 10px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url("https://cdn.dribbble.com/userupload/4473677/file/original-a5a393b8491895ba882b32b4b7b22cb5.gif");
border-style: solid;
box-shadow: 0 4px 10px rgba(138, 43, 226, 0.6);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
background-image: url('https://cdn.pixabay.com/animation/2023/12/23/12/27/12-27-41-134_512.gif');
background-repeat: no-repeat;
background-size: 15%;
background-position: right;
}
/* Play Button */
#melody:after{
content: '';
background-image: url('https://img.icons8.com/glyph-neue/64/FA5252/next.png');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(1px 1px 1px green);
height: 30px;
width: 30px;
left: 10px;
top: 6px;
position: absolute;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color:transparent;
border-radius: 0; /* straight edges */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: white;
display: block;
font-family: "Comic Sans MS";
font-size: 13px;
font-weight: 1;
height: 50%;
letter-spacing: 3px;
font-variant: small-caps;
text-transform: lowercase;
padding: 0px;
text-align: left;
width: 240px!important;
text-shadow: 1px 1px 1px red;
}
#melody .song{
padding: 8px;
}
#melody .artist{
padding-left:10px;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/nIhs1T7OcZg//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Jingle Bell Rock</span>
<span class="artist">Bobby Helms</span>
</div>
</div>
Nightcore #1
aLL i eVEr WaNTed
NIghTcoRe
<style>
/* main div */
#melody {
background-color: black;
border-image-slice: 30 30 30 30;
border-image-width: 12px 12px 12px 12px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url("https://userstyles.org/style_screenshots/263557_after.jpeg?r=1761094882");
border-style: solid;
box-shadow: 2px 2px 0px lime, -2px -2px 0px Magenta;
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after{
content: '';
background-image: url('https://dl.glitter-graphics.com/pub/1096/1096950pd7x3clxw0.gif');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(1px 1px 1px green);
height: 30px;
width: 30px;
left: 10px;
top: 6px;
position: absolute;
z-index: 1;
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color:transparent;
border-radius: 0; /* straight edges */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: white;
display: block;
font-family: "Comic Sans MS";
font-size: 13px;
font-weight: 1;
height: 50%;
letter-spacing: 3px;
padding: 0px;
text-align: left;
width: 240px!important;
text-shadow: 1px 1px 1px red;
}
#melody .song{
padding: 8px;
}
#melody .artist{
padding-left:10px;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/nwrTqdJB7z4//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">aLL i eVEr WaNTed</span>
<span class="artist">NIghTcoRe</span>
</div>
</div>
Red #1
Complicated
Avril Lavigne
<style>
/* main div */
#melody {
background: linear-gradient(145deg, #0a0000, #1c0000, #2b0000);
border: 3px solid #5a0000;
border-radius: 5px;
box-shadow: inset 0 0 10px #300000, 0 0 20px rgba(80, 0, 0, 0.8), 0 0 35px rgba(255, 0, 0, 0.2);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
background-image: url('https://img.icons8.com/comic/100/ffffff/music-record.png');
background-size: 100% 100%;
background-repeat: no-repeat;
filter: drop-shadow(1px 1px 5px red);
width: 40px;
height: 40px;
left: 5px;
top: 5px;
position: absolute;
z-index: 1;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* the youtube music video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background: rgba(15, 0, 0, 0.7);
border-left: 1px solid rgba(255, 0, 0, 0.2);
border-radius: 0 10px 10px 0;
height: 100%;
left: 60px;
padding-left:10px;
position: absolute;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #e0e0e0;
display: block;
font-family: 'Times New Roman';
font-size: 16px;
font-weight: 700;
height: 50%;
padding: 4px;
text-shadow: 0 0 8px #7a0000, 0 0 15px #ff0000;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/5eGbnVlRcRg//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Complicated</span>
<span class="artist">Avril Lavigne</span>
</div>
</div>
Black and White #2
𝕮𝖎𝖓𝖙𝖆𝖒𝖚 𝕾𝖊𝖕𝖆𝖍𝖎𝖙 𝕿𝖔𝖕𝖎 𝕸𝖎𝖗𝖎𝖓𝖌
ᴊᴏɢᴊᴀ ʜɪᴘ ʜᴏᴘ ꜰᴏᴜɴᴅᴀᴛɪᴏɴ
<style>
/* main div */
#melody {
background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExeW50bDd0bDJqaG96bGdjazVuN2Qwbmxydmp3M2hjNXJhNmszNWwwYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fx4zxFLVDAluXnk4qH/giphy.gif');
background-size: 30%;
border-radius: 0;
border: 1px solid #2b2b2b;
box-shadow: inset 2px 2px 5px #0a0a0a, inset -2px -2px 6px #2c2c2c, 0 0 12px rgba(0,0,0,0.7);
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
content: '';
background-image: url('https://img.icons8.com/connect/100/FFFFFF/play.png');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: drop-shadow(1px 1px 3px #000);
height: 40px;
left: 5px;
position: absolute;
top: 5px;
width: 40px;
z-index: 1;
}
/* the youtube video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2));
border-left: 1px solid #3a3a3a;
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
color: #e0e0e0;
display: block;
font-family: "Georgia";
font-size: 14px;
font-weight: bold;
height: 50%;
padding: 4px;
text-shadow: 0 0 3px #000, 0 0 6px #333;
width: 240px!important;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/UPkEI96zFRQ//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">𝕮𝖎𝖓𝖙𝖆𝖒𝖚 𝕾𝖊𝖕𝖆𝖍𝖎𝖙 𝕿𝖔𝖕𝖎 𝕸𝖎𝖗𝖎𝖓𝖌</span>
<span class="artist">ᴊᴏɢᴊᴀ ʜɪᴘ ʜᴏᴘ ꜰᴏᴜɴᴅᴀᴛɪᴏɴ</span>
</div>
</div>
White and Gray #1
𝕭𝖗𝖎𝖓𝖌 𝕸𝖊 𝕿𝖔 𝕷𝖎𝖋𝖊
𝕰𝖛𝖆𝖓𝖊𝖘𝖈𝖊𝖓𝖈𝖊
<style>
/* main div */
#melody {
background: linear-gradient(145deg, #f8f8f8, #eaeaea);
border-radius: 3px;
border: 2px solid silver;
box-shadow: 0 4px 10px silver;
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
background-image: url('https://img.icons8.com/laces/64/808080/circled-play.png');
background-repeat: no-repeat;
background-size: 100% 100%;
filter:drop-shadow(3px 3px 3px gray);
content: '';
height: 40px;
left: 7px;
position: absolute;
top: 3px;
width: 40px;
z-index: 1;
}
/* the youtube video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 0 12px 12px 0; /* round the overlay’s right side */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
display: block;
height: 50%;
text-align: left;
width: 240px!important;
}
#melody .song{
color: #333;
font-size: 16px;
padding-left: 6px;
text-shadow: 0 0 4px silver;
}
#melody .artist{
padding-left: 6px;
color: #777;
font-family: 'UnifrakturMaguntia', cursive;
font-size: 13px;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/ltoaQo2ynSo//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">𝕭𝖗𝖎𝖓𝖌 𝕸𝖊 𝕿𝖔 𝕷𝖎𝖋𝖊</span>
<span class="artist">𝕰𝖛𝖆𝖓𝖊𝖘𝖈𝖊𝖓𝖈𝖊</span>
</div>
</div>
Phantom of the Opera
𝓣𝓱𝓮 𝓟𝓱𝓪𝓷𝓽𝓸𝓶 𝓞𝓯 𝓣𝓱𝓮 𝓞𝓹𝓮𝓻𝓪
𝒢𝑒𝓇𝒶𝓇𝒹 𝐵𝓊𝓉𝓁𝑒𝓇 · 𝐸𝓂𝓂𝓎 𝑅𝑜𝓈𝓈𝓊𝓂
<style>
/* main div */
#melody {
background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExMGwzaTU2djR0d29mYzI3b2F0OWQ5eW1pcWIxd3B3eThiNTlmcmV1cSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/isvqoXulxRiHcQ7Kpl/giphy.gif'), url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExNXJkaTVobGFqbHg4NzludGd3NnhwNnpqMHJ5bG54N2hxNGdlZmc5cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5vgHoMiknf5iJl8FH1/giphy.gif');
background-size: 10%, contain;
background-repeat: no-repeat, repeat;
background-position: right;
border-radius: 3px;
border: 2px solid silver;
box-shadow: 0 4px 10px silver;
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody:after {
background-image: url('https://img.icons8.com/doodle/48/play-button-circled.png');
background-repeat: no-repeat;
background-size: 100% 100%;
filter:drop-shadow(0px 0px 4px orange);
content: '';
height: 40px;
left: 7px;
position: absolute;
top: 3px;
width: 40px;
z-index: 1;
}
/* the youtube video in the background */
#melody iframe {
height: 47px;
left: 0;
opacity: 0.01; /* still clickable but hidden */
position: absolute;
top: 0;
z-index: 2;
}
/* div on top of youtube video */
#melody div {
border-radius: 0 12px 12px 0; /* round the overlay’s right side */
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody span {
display: block;
height: 50%;
text-align: left;
width: 240px!important;
padding: 3px;
}
#melody .song{
color: OrangeRed;
font-size: 13px;
padding-left: 6px;
text-shadow: 0 0 4px red;
}
#melody .artist{
padding-left: 6px;
color: OrangeRed;
font-family: 'UnifrakturMaguntia', cursive;
font-size: 11px;
}
</style>
<div id="melody">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/FKHMRGMkQHU//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">𝓣𝓱𝓮 𝓟𝓱𝓪𝓷𝓽𝓸𝓶 𝓞𝓯 𝓣𝓱𝓮 𝓞𝓹𝓮𝓻𝓪</span>
<span class="artist">𝒢𝑒𝓇𝒶𝓇𝒹 𝐵𝓊𝓉𝓁𝑒𝓇 · 𝐸𝓂𝓂𝓎 𝑅𝑜𝓈𝓈𝓊𝓂</span>
</div>
</div>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
sudofry
Nice! :)