baisemain | CODE: Collapsible Playlist

The Kids Aren't Alright

Sylvester Stoker

0:00

6:13

Young and Menace ▶ Fall Out Boy

Oops I, did it again, I forgot what I was losing my mind about Oh, I only wrote this down to make you press rewind And send a message: I was young and a menace

Choked Out ▶ The Mountain Goats

No brakes down An endless dark incline Most of the boys Won't ever cross this line If they all want to die dead broke that's fine, that's fine Everybody's got their limits Nobody's found mine

Blood ▶ Sons and Daughters

With the same eyes as me The same fearing frame We can try and disguise Compromise rights And I know what you're thinking We wear the same dress The same colours right Is this what suits our weakened pride? How do I know? 'Cause you're my blood (Sy & Rosy)

CODE

UPDATED 12/6/2022: Accidentally posted this with messed up spacing for the lyrics. Oops. Fixed now.
I can't think of a name, so this is just Collapsible Playlist for now. This code was inspired by Spotify, but you can sub in whatever music service of your choice. I think it's fairly easy to edit and customize, but please comment below if you need any help. I made a few variants in white or black, but since this is pure HTML/CSS, you can change anything, including the colours of the control icons. This code is compatible with mobile and IJ.

By default, the code shows the playlist and the first song's lyrics. If you'd like to change this, you can delete open from <details class="SONG_ENTRY" open> to hide the lyrics, or delete open from <details class="PLAYLIST" open ...> to hide the whole playlist until the user clicks on the header.

We are Bulletproof: the Eternal

BTS

0:00

4:22

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

CODE

WHITE, NO DROPSHADOW

<lj-raw><details class="PLAYLIST" open style="margin:0 auto;max-width:480px;border:1px solid #CCC;font:12px Verdana,sans-serif;border-radius:10px;overflow:hidden;">
<summary style="display:flex;font-size:0;outline:none;cursor:pointer;height:250px;">
<div class="PLAYER" style="background:#6D5389 url('BACKGROUND_IMG_URL') center;background-size:cover;height:100%;width:100%;">
<div style="height:100%;box-sizing:border-box;padding:30px;background:rgba(0 0 0/0.2);"><div style="text-align:left;color:#FFFFFF;font-size:14px;margin:15px 0 25px;"><div class="TITLE" style="font-size:125%;font-weight:600;padding-bottom:3px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
TITLE_TEXT
</div><div class="SUBTITLE" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
SUBTITLE_TEXT
</div></div>

<details class="SONG_ENTRY" open>
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#E5DFEC;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

<details class="SONG_ENTRY">
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#E5DFEC;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

</div><div class="FOOTER" style="display:block;padding:20px;border-top:1px solid #CCC;text-align:center;letter-spacing:4px;font-weight:600;background:#6D5389;">
<a href="PLAYLIST_URL" target="_blank" style="text-decoration:none;color:#FEFEFE;">
LISTEN ON SPOTIFY
</a>
</div>
</details>

COLOURS

#FFFFFF

- title, subtitle, playbar, timecodes, control icons

#CCC   

- borders

#EEE   

- playlist background

#111   

- playlist text

#E5DFEC

- playlist lyrics text

#6D5389

- footer background

#FEFEFE

- footer link

TEXT REPLACEMENTS
BACKGROUND_IMG_URL - background image for the "player"
PLAYLIST_URL - link to your playlist (on Spotify, etc.)

NOTES
There is a subtle dark overlay on the background image. To remove this, find and delete background:rgba(0 0 0/0.2);

To change the position of the playbar, find width:33% and change the number to anything between 0-100.

The colour of the tracking bar is at background:rgba(255 255 255/0.3); - to change this, find the RGB value of the colour you want and replace 255 255 255.

Savage

Megan Thee Stallion

0:00

2:35

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

CODE

BLACK, NO DROPSHADOW (click above to expand)

<lj-raw><details class="PLAYLIST" open style="margin:0 auto;max-width:480px;border:1px solid #CCC;font:12px Verdana,sans-serif;border-radius:10px;overflow:hidden;">
<summary style="display:flex;font-size:0;outline:none;cursor:pointer;height:250px;">
<div class="PLAYER" style="background:#DBDBDB url('BACKGROUND_IMG_URL') center;background-size:cover;height:100%;width:100%;">
<div style="height:100%;box-sizing:border-box;padding:30px;background:rgba(255 255 255/0.2);"><div style="text-align:left;color:#121212;font-size:14px;margin:15px 0 25px;"><div class="TITLE" style="font-size:125%;font-weight:600;padding-bottom:3px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
TITLE_TEXT
</div><div class="SUBTITLE" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
SUBTITLE_TEXT
</div></div>

<details class="SONG_ENTRY" open>
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#DDDDDD;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

<details class="SONG_ENTRY">
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#DDDDDD;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

</div><div class="FOOTER" style="display:block;padding:20px;border-top:1px solid #CCC;text-align:center;letter-spacing:4px;font-weight:600;background:#000000;">
<a href="PLAYLIST_URL" target="_blank" style="text-decoration:none;color:#FEFEFE;">
LISTEN ON SPOTIFY
</a>
</div>
</details>

COLOURS

#121212

- title, subtitle, playbar, timecodes, control icons

#CCC   

- borders

#EEE   

- playlist background

#111   

- playlist text

#DDDDDD

- playlist lyrics text

#000000

- footer background

#FEFEFE

- footer link

TEXT REPLACEMENTS
BACKGROUND_IMG_URL - background image for the "player"
PLAYLIST_URL - link to your playlist (on Spotify, etc.)

NOTES
There is a subtle light overlay on the background image. To remove this, find and delete background:rgba(255 255 255/0.2);

To change the position of the playbar, find width:33% and change the number to anything between 0-100.

The colour of the tracking bar is at background:rgba(0 0 0/0.3); - to change this, find the RGB value of the colour you want and replace 0 0 0.

Goddess

Astrid Leong

0:00

4:22

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

CODE

WHITE, WITH DROPSHADOW (click above to expand)

<lj-raw><details class="PLAYLIST" open style="margin:0 auto;max-width:480px;border:1px solid #CCC;font:12px Verdana,sans-serif;border-radius:10px;overflow:hidden;">
<summary style="display:flex;font-size:0;outline:none;cursor:pointer;height:250px;">
<div class="PLAYER" style="background:#121212 url('BACKGROUND_IMG_URL') center;background-size:cover;height:100%;width:100%;">
<div style="height:100%;box-sizing:border-box;padding:30px;background:rgba(0 0 0/0.2);"><div style="text-align:left;color:#FFFFFF;font-size:14px;margin:15px 0 25px;"><div class="TITLE" style="font-size:125%;font-weight:600;padding-bottom:3px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px #F44336;">
TITLE_TEXT
</div><div class="SUBTITLE" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px #F44336;">
SUBTITLE_TEXT
</div></div>

<details class="SONG_ENTRY" open>
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#FCD2CF;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

<details class="SONG_ENTRY">
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#FCD2CF;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

</div><div class="FOOTER" style="display:block;padding:20px;border-top:1px solid #CCC;text-align:center;letter-spacing:4px;font-weight:600;background:#F44336;">
<a href="PLAYLIST_URL" target="_blank" style="text-decoration:none;color:#FEFEFE;">
LISTEN ON SPOTIFY
</a>
</div>
</details>

COLOURS

#FFFFFF

- title, subtitle, playbar, timecodes, control icons

#F44336

- dropshadow

#CCC   

- borders

#EEE   

- playlist background

#111   

- playlist text

#FCD2CF

- playlist lyrics text

#F44336

- footer background

#FEFEFE

- footer link

TEXT REPLACEMENTS
BACKGROUND_IMG_URL - background image for the "player"
PLAYLIST_URL - link to your playlist (on Spotify, etc.)

Butter (Hotter Remix)

BTS

0:00

2:35

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

Song_Name_Here ▶ Artist_Name_Here

Lyrics here Lyrics here Lyrics here

CODE

BLACK, WITH DROPSHADOW (click above to expand)

<lj-raw><details class="PLAYLIST" open style="margin:0 auto;max-width:480px;border:1px solid #CCC;font:12px Verdana,sans-serif;border-radius:10px;overflow:hidden;">
<summary style="display:flex;font-size:0;outline:none;cursor:pointer;height:250px;">
<div class="PLAYER" style="background:#DBDBDB url('BACKGROUND_IMG_URL') center;background-size:cover;height:100%;width:100%;">
<div style="height:100%;box-sizing:border-box;padding:30px;background:rgba(255 255 255/0.2);"><div style="text-align:left;color:#121212;font-size:14px;margin:15px 0 25px;"><div class="TITLE" style="font-size:125%;font-weight:600;padding-bottom:3px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px #FFC107;">
TITLE_TEXT
</div><div class="SUBTITLE" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px #FFC107;">
SUBTITLE_TEXT
</div></div>

<details class="SONG_ENTRY" open>
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#FFF2CC;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

<details class="SONG_ENTRY">
<summary style="display:block;padding:1rem;border-top:1px solid #CCC;cursor:pointer;">
<b>Song_Name_Here</b> ▶ <i>Artist_Name_Here</i>
</summary>
<div style="background:#FFF2CC;border-top:1px solid #CCC;padding:1em 2em 2em;white-space:pre-line;text-align:center;">
Lyrics here
Lyrics here
Lyrics here
</div></details>

COLOURS

#121212

- title, subtitle, playbar, timecodes, control icons

#FFC107

- dropshadow

#CCC   

- borders

#EEE   

- playlist background

#111   

- playlist text

#FFF2CC

- playlist lyrics text

#000000

- footer background

#FFC107

- footer link

TEXT REPLACEMENTS
BACKGROUND_IMG_URL - background image for the "player"
PLAYLIST_URL - link to your playlist (on Spotify, etc.)

CODE: Collapsible Playlist

no subject

no subject