Report Blog Entry
Spongebob
Name
Name
<style>
/* main div */
#melody1 {
background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExbnk0dWFuMDl4Y2V5dDJrazI1aHJxdHU1YmM3cG0wcmo5YXFsNnJiZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/yqMtk0TfjRa5W/giphy.gif'), url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDFsaHFsbWNubDJ6eWllMTVtOGFuMWlkanZnYm1ja3B2eDIwcWFpdCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/U3qYN8S0j3bpK/giphy.gif');
background-size: contain, 60%;
background-repeat: no-repeat, repeat;
background-position: right;
border-radius: 3px;
border: 2px solid yellow;
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody1:after {
content: '';
background-image: url('https://img.icons8.com/pulsar-line/48/f0e68c/circled-play.png');
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
height: 40px;
left: 7px;
position: absolute;
top: 3px;
width: 40px;
z-index: 1;
}
/* the youtube video in the background */
#melody1 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 */
#melody1 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 */
#melody1 span {
display: block;
height: 50%;
padding: 5px;
text-align: left;
width: 240px!important;
}
#melody1 .song{
color: yellow;
font-size: 13px;
padding-left: 6px;
text-shadow: 0 0 4px red;
}
#melody1 .artist{
color: white;
font-family: 'UnifrakturMaguntia', cursive;
font-size: 12px;
padding-left: 6px;
padding-top:0px;
}
</style>
<div id="melody1">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/76hX513XsTY//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Name</span>
<span class="artist">Name</span>
</div>
</div>
Blank
Name
Name
<style>
/* main div */
#melody2 {
background-color: white;
border-radius: 3px;
border: 2px solid black;
height: 50px;
max-width: 305px;
overflow: hidden;
position: relative;
}
/* Play Button */
#melody2:after {
content: '';
background-image: url('https://img.icons8.com/ios-filled/50/circled-play.png');
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
height: 40px;
left: 7px;
position: absolute;
top: 3px;
width: 40px;
z-index: 1;
}
/* the youtube video in the background */
#melody2 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 */
#melody2 div {
height: 100%;
left: 55px;
position: absolute;
width: 100%;
z-index: 3;
}
/* the div for the song name and artist */
#melody2 span {
display: block;
height: 50%;
padding: 5px;
font-family: "Tahoma";
text-align: left;
width: 240px!important;
}
#melody2 .song{
color: black;
font-size: 13px;
padding-left: 6px;
}
#melody2 .artist{
color: black;
font-size: 12px;
padding-left: 6px;
padding-top:0px;
}
</style>
<div id="melody2">
<iframe allowfullscreen="" src="https://www.youtube.com/embed/JRWw6jpKquo//?&;amp;;autoplay=1&;loop=1&;controls=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
<div>
<span class="song">Name</span>
<span class="artist">Name</span>
</div>
</div>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )