flipflap's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

SoundCloud + YouTube MP3 Player HTML

☆FLIPFLAP'S PLAYLIST☆
JE SUIS UN HOMME - ZAZIE [EXT THIBB EDIT]
SEXUAL XXXXX! - BUCK-TICK
CRIMINAL - BRITNEY SPEARS
WHAT THE HELL - AVRIL LAVIGNE
ROSE-COLORED BOY - PARAMORE
JODY - TATSURO YAMASHITA
ROCK OVER JAPAN - TRIPLE H
AMERICAN IDIOT - GREEN DAY

⠀⠀⠀⠀⠀△

⠀◁⠀⠀ ◯ ⠀⠀▷

⠀⠀⠀⠀⠀▽

SOUNDCLOUD CODE<!------------ OUTER CONTAINER ------------> <div style="margin: auto; width: 190px; height: 325px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 5px; overflow: hidden; padding-bottom: 5px;"> <!------------ MIDDLE CONTAINER ------------> <div style="width: 190px; height: 195px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 2px solid lightgrey; border-radius: 5px; overflow-x: hidden; overflow-y: scroll; scrollbar-color: rgba(148, 187, 197, 1) transparent; scrollbar-width: thin; padding-left: 5px; padding-bottom: 5px;"> <!------------ HEADER ------------> <div style="display: table; text-align: center; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); color: #5c4fbd; text-shadow: 1px 1px 1px rgba(8, 47, 161, 1); width: 185px; height: 20px; overflow: hidden; position: absolute; z-index: 2; border: 2px solid lightgrey; border-top: transparent; border-left: transparent; border-right: transparent; border-radius: 5px 5px 0px 0px; transform: translateX(-5px);"> <div style="display: table-row;"> <!-- HEADER TEXT --> ☆FLIPFLAP'S PLAYLIST☆ </div> </div> <div style="display: table; width: 180px; height: 20px;"> <div style="display: table-row;"> </div> </div> <!------------ START PLAYLIST ------------> <!------------ SONG #1 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com/tracks/285154837&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> JE SUIS UN HOMME - ZAZIE [EXT THIBB EDIT] </marquee> </div> </div> </div> <!------------ SONG #2 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1031188336&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> SEXUAL XXXXX! - BUCK-TICK </marquee> </div> </div> </div> <!------------ SONG #3 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com/tracks/27020448&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> CRIMINAL - BRITNEY SPEARS </marquee> </div> </div> </div> <!------------ SONG #4 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com/tracks/107142849&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> WHAT THE HELL - AVRIL LAVIGNE </marquee> </div> </div> </div> <!------------ SONG #5------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com/tracks/321590916&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> ROSE-COLORED BOY - PARAMORE </marquee> </div> </div> </div> <!------------ SONG #6------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com/tracks/2073675136&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> JODY - TATSURO YAMASHITA </marquee> </div> </div> </div> <!------------ SONG #7------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F31206438&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> ROCK OVER JAPAN - TRIPLE H </marquee> </div> </div> </div> <!------------ SONG #8------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- SOUNDCLOUD EMBED --> <iframe src="https://w.soundcloud.com/player/?visual=false&url=https%3A%2F%2Fapi.soundcloud.com/tracks/1893660072&color=%2008DCE8&show_artwork=false&show_comments=false" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen=""></iframe></div> <!-- SONG AND ARTIST NAME --> <div style="display: table-cell; padding-left: 2.75px"><marquee style="float: left; padding-top: 3px; width: 140px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> AMERICAN IDIOT - GREEN DAY </marquee> </div> </div> </div> <!------------ END PLAYLIST ------------> </div> <!------------ BUTTONS ------------> <br><div style="position: relative; left: 22%;width: 100px; height: 100px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 50%; overflow: hidden; text-align: center; padding-top: 22.5%;"><div style="position: absolute; text-align: left; bottom: 9px; left: 3px; color: grey;"> ⠀⠀⠀⠀⠀△ <br><br> ⠀◁⠀⠀ ◯ ⠀⠀▷ <br><br> ⠀⠀⠀⠀⠀▽ </div> </div> <div style="position: relative; bottom: 100px; left: 5px; width: 40px; height: 40px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 50%;"></div> <div style="position: relative; bottom: 141px; left: 140px; width: 40px; height: 40px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 50%;"></div> <!------------ END BUTTONS ------------> <!------------ STICKERS ------------> <div style="position: relative; bottom: 125px; left: -4px;"><img src="https://mystickermania.com/cdn/stickers/noob-pack/sanrio-cinnamoroll-bow-512x512.png" width="50px" height="50px"></div> <div style="position: relative; bottom: 175px; left: 137px;"><img src="https://mystickermania.com/cdn/stickers/noob-pack/sanrio-cinnamoroll-umbrella-512x512.png" width="50px" height="50px"></div> <div style="position: relative; bottom: 310px; left: 135px;"><img src="https://media.tenor.com/fTaJKvvsAboAAAAj/cinnamoroll-sanrio.gif" width="50px" height="50px"></div> <div style="position: relative; bottom: 370px; left: 0px;"><img src="https://64.media.tumblr.com/e0a25ce140b116261a16cdb9fd780ed2/0aff0be0eccacd6b-58/s250x400/cc146f7cc3feb3008879f42598ef81cf615cafe8.gif" width="50px" height="50px"></div></div>

Unminify HTML here

 Get the embed code from SoundCloud and find the part that follows the pattern "api.soundcloud.com/tracks/[STRING OF NUMBERS]". Copy that part. Then paste it in the part of the code that's like "url=https%3A%2F%2F[YOUR SONG HERE]&"

☆FLIPFLAP'S PLAYLIST☆
▶
KOKORO NO TAMAGO (こころのたまご) - BUONO! (ボーノ)
▶
GROOVY! - KOHMI HIROSE
▶
MOONLIGHT DENSETSU - DALI
▶
SERENDIPITY - ZAQ
▶
CONNECT - CLARIS
▶
OTOMELODY - MIKAKO TAKAHASHI
▶
CHOCOLA NI MUCHUU - KARIA NOMOTO
▶
HEARTBEAT - PRIERE

⠀⠀⠀⠀⠀△

⠀◁⠀⠀ ◯ ⠀⠀▷

⠀⠀⠀⠀⠀▽

YOUTUBE CODE<!------------ OUTER CONTAINER ------------> <div style="margin: auto; width: 190px; height: 325px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 5px; overflow: hidden; padding-bottom: 5px;"> <!------------ MIDDLE CONTAINER ------------> <div style="width: 190px; height: 195px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 2px solid lightgrey; border-radius: 5px; overflow-x: hidden; overflow-y: scroll; scrollbar-color: rgba(148, 187, 197, 1) transparent; scrollbar-width: thin; padding-left: 5px; padding-bottom: 5px;"> <!------------ HEADER ------------> <div style="display: table; text-align: center; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); color: #5c4fbd; text-shadow: 1px 1px 1px rgba(8, 47, 161, 1); width: 185px; height: 20px; overflow: hidden; position: absolute; z-index: 2; border: 2px solid lightgrey; border-top: transparent; border-left: transparent; border-right: transparent; border-radius: 5px 5px 0px 0px; transform: translateX(-5px);"> <div style="display: table-row;"> <!-- HEADER TEXT --> ☆FLIPFLAP'S PLAYLIST☆ </div> </div> <div style="display: table; width: 180px; height: 20px;"> <div style="display: table-row;"> </div> </div> <!------------ START PLAYLIST ------------> <!------------ SONG #1 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/ueZnq0ekVX4?si=L2w0cs3b1ul4zlR-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #87fdff; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> KOKORO NO TAMAGO (こころのたまご) - BUONO! (ボーノ) </marquee> </div> </div> </div> <!------------ SONG #2 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/Je0hiUmxxrg?si=ZaovSz18nynRBTIX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #58e6ed; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> GROOVY! - KOHMI HIROSE </marquee> </div> </div> </div> <!------------ SONG #3 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/3bBpiHJm3t0?si=U80fhTPMckH9p6yg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #87fdff; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> MOONLIGHT DENSETSU - DALI </marquee> </div> </div> </div> <!------------ SONG #4 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/q6v51jfkmC0?si=5qwj_wv5MzabBnkm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #58e6ed; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> SERENDIPITY - ZAQ </marquee> </div> </div> </div> <!------------ SONG #5 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/A8CbP6Pjqko?si=xqw-aBRlVC7JJ5Nr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #87fdff; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> CONNECT - CLARIS </marquee> </div> </div> </div> <!------------ SONG #6 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/kDCpaMCOcWI?si=FrQ-dnNkctZ5sR6_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #58e6ed; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> OTOMELODY - MIKAKO TAKAHASHI </marquee> </div> </div> </div> <!------------ SONG #7 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); border: 1px solid blue; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/-eSzJPXzgvw?si=cIntfjBGjXqi8usJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #87fdff; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: white; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> CHOCOLA NI MUCHUU - KARIA NOMOTO </marquee> </div> </div> </div> <!------------ SONG #8 ------------> <!-- MUSIC PLAYER CONTAINER / COLOR --> <div style="display: table; left: 0px; width: 180px; background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); border: 1px solid grey; padding: 1px; border-radius: 5px;"><div style="display: table-row;"><div style="display: table-cell; top: -0.75px; left: 0.75px; width: 21px; height: 20.44px; position: relative;"> <!-- YOUTUBE EMBED --> <iframe style="position: relative; border-radius: 50%; top: 2px; left: 1.5px;" width="100" height="100%" src="https://www.youtube.com/embed/YUzqWGDqCfg?si=8zyBxBW5I6O7WY5W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div> <div style="display: table-cell; position: relative; padding-left: 3px;"> <!-- PLAY BUTTON --> <div style="position: absolute; bottom: 2.5px; left: -19px ; width: 21px; height: 20.44px; background-color: #58e6ed; color: white; text-align: center; text-shadow: 1px 1px 1px blue; padding-top: 3px; pointer-events: none; border-radius: 50%;">▶</div> <!-- SONG AND ARTIST NAME --> <marquee style="position: relative; left: 3px; float: left; padding-top: 3px; width: 135px; color: #5c4fbd; text-shadow: 1px 1px 1px #008DCE;" direction="right" behavior="scroll"> HEARTBEAT - PRIERE </marquee> </div> </div> </div> <!------------ END PLAYLIST ------------> </div> <!------------ BUTTONS ------------> <br><div style="position: relative; left: 22%;width: 100px; height: 100px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 50%; overflow: hidden; text-align: center; padding-top: 22.5%;"><div style="position: absolute; text-align: left; bottom: 9px; left: 3px; color: grey;"> ⠀⠀⠀⠀⠀△ <br><br> ⠀◁⠀⠀ ◯ ⠀⠀▷ <br><br> ⠀⠀⠀⠀⠀▽ </div> </div> <div style="position: relative; bottom: 100px; left: 5px; width: 40px; height: 40px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 50%;"></div> <div style="position: relative; bottom: 141px; left: 140px; width: 40px; height: 40px; background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); border: 1px solid lightgrey; border-radius: 50%;"></div> <!------------ END BUTTONS ------------> <!------------ STICKERS ------------> <div style="position: relative; bottom: 125px; left: -4px;"><img src="https://mystickermania.com/cdn/stickers/noob-pack/sanrio-cinnamoroll-bow-512x512.png" width="50px" height="50px"></div> <div style="position: relative; bottom: 175px; left: 137px;"><img src="https://mystickermania.com/cdn/stickers/noob-pack/sanrio-cinnamoroll-umbrella-512x512.png" width="50px" height="50px"></div> <div style="position: relative; bottom: 310px; left: 135px;"><img src="https://media.tenor.com/fTaJKvvsAboAAAAj/cinnamoroll-sanrio.gif" width="50px" height="50px"></div> <div style="position: relative; bottom: 370px; left: 0px;"><img src="https://64.media.tumblr.com/e0a25ce140b116261a16cdb9fd780ed2/0aff0be0eccacd6b-58/s250x400/cc146f7cc3feb3008879f42598ef81cf615cafe8.gif" width="50px" height="50px"></div></div>

The YouTube version doesn't work properly on mobile sadly... it opens the video in a new tab when you click the play button.

To remove the stickers, delete this part:

<!------------ STICKERS ------------> <div style="position: relative; bottom: 125px; left: -4px;"><img src="https://mystickermania.com/cdn/stickers/noob-pack/sanrio-cinnamoroll-bow-512x512.png" width="50px" height="50px"></div> <div style="position: relative; bottom: 175px; left: 137px;"><img src="https://mystickermania.com/cdn/stickers/noob-pack/sanrio-cinnamoroll-umbrella-512x512.png" width="50px" height="50px"></div> <div style="position: relative; bottom: 310px; left: 135px;"><img src="https://media.tenor.com/fTaJKvvsAboAAAAj/cinnamoroll-sanrio.gif" width="50px" height="50px"></div> <div style="position: relative; bottom: 370px; left: 0px;"><img src="https://64.media.tumblr.com/e0a25ce140b116261a16cdb9fd780ed2/0aff0be0eccacd6b-58/s250x400/cc146f7cc3feb3008879f42598ef81cf615cafe8.gif" width="50px" height="50px"></div>


86 Kudos

—

Comments

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

Marii¿?

 Marii¿?'s profile picture

omg this is so fucking cool i think i love u


Report Comment

victor gray

 victor gray's profile picture

it's getting it as a video when I replace the youtube embed code with mine. I think I'm doing it wrong.


Report Comment



just replace the [src="https://www.youtube.com/embed/ueZnq0ekVX4?si=L2w0cs3b1ul4zlR-"] part with your custom embed url

by flipflap; ; Report

I'll try it, thank you <3

by victor gray; ; Report

Matthew Edward Hall

Matthew Edward Hall's profile picture

Could it have webhosted songs like this https://MatthewEdwardHall.org/iCiebieTezBardzo.wav
or https://MatthewEdwardHall.org/SaveTheWorld.mp3


Report Comment



sadly no. spacehey doesn't allow for the < audio > tag to be used. you could probably modify it for use on other websites though.

by flipflap; ; Report

Thanks for helping clarify

by Matthew Edward Hall ; ; Report

hikkineetboi

 hikkineetboi's profile picture

wow tysm, ur really supporting the community flipflap :3


Report Comment

tobey

 tobey's profile picture

oh This is so cool what the heck :OOO


Report Comment

miooookunh

 miooookunh's profile picture

swag


Report Comment

freakicokris ☆ | FREE VENEZUELA 🇻🇪🕊️

 freakicokris ☆ | FREE VEN...'s profile picture

WHAT THIS IS SO COOL!!! 🩷🩷🩷


Report Comment

scorpion( ﾟ□ﾟ)

 scorpion( ﾟ□ﾟ)'s profile picture

Omg iblove I'm in lovvveeee omggg


Report Comment

El Chivo

 El Chivo's profile picture

All of the things you make are so cool and fun omg ｡⁠:ﾟ⁠(⁠;⁠´⁠∩⁠`⁠;⁠)ﾟ⁠:⁠｡


Report Comment

Tricks4Twilight

 Tricks4Twilight's profile picture

this is so swag, im gonna have to experiment with this sometime ^-^


Report Comment

asul

 asul's profile picture

I love this so much


Report Comment