Girly retro YT player for indieweb

[DorianBay]

A few days ago I finished my Retro YouTube player for indie sites!! It's made for all the girls, gays, and theys of the indieweb    (but you can use it if you are straight as well, dw)

It's designed to be easy-to-use with beginner coding knowledge, customisable, and responsive with all devices. It's made just with JavaScript, HTML, and CSS. The control icons are made by me so you can modify and use them however. Autoplay is turned off by default, but it's easy to turn it in the playlist.js file.

If you want to check it out, here's the Github repository.

Here is the player on my site. (If you go on other pages of my site, be aware of flashing GIFs. The player page has only one very subtle GIF, however.)

This is my first big JavaScript project and I would appreciate any critique or advice. If you use the player on your site, feel free to send me the link to it, I would love to see 

[boreal_cryptid]

oh my gods, thank you for this code! i was looking for media players for a long time, but i didn't want to host songs/videos anywhere.

i wonder, would it work if i paste "no-cookies" embed code option from youtube? will it collect my visitors data until they click on player?

[DorianBay]

oh my gods, thank you for this code! i was looking for media players for a long time, but i didn't want to host songs/videos anywhere.

No problem! I had the same issue so I finally said "I'll just do it myself" XD I'm really happy the player can be useful to you as well!

i wonder, would it work if i paste "no-cookies" embed code option from youtube? will it collect my visitors data until they click on player?

Yes! Actually, I specifically made this player to work with youtube.nocookie links. If you look at the code, my songs are all "no-cookie" links, and I force the YouTube API to play videos via the "no-cookie" site because I really wanted to keep the player as private as possible. It doesn't convert regular YouTbe links into "no-cookie" ones, but if you give it a "no-cookie" link, it will be forced to play it via the "no-cookie" site, if that makes sense. That's why I recommend using "no-cookie" links on my GitHub.

Even with that, YouTube will try to collect some data but only once a user plays the video. But, browsers like Brave will block it for example.

[MrsMoe]

This is so cool! Definitely want to use it now for a cool little playlist of goth/indie rock and cursed videos~

[MrsMoe]

Uh, hey. I hope you don't mind me asking for help. I've redirected the button icons and everything, but the player keeps appearing like this to me (without a visible container). Is there something I'm doing wrong? I'm admittedly still mid as hell at HTML, so sorry if this is a dumb question

[grubbyfox]

stupid question, but is it possible to make without js? 

also, omg it's so cute and pleasing to look at omfg

[DorianBay]

Uh, hey. I hope you don't mind me asking for help. I've redirected the button icons and everything, but the player keeps appearing like this to me (without a visible container). Is there something I'm doing wrong? I'm admittedly still mid as hell at HTML, so sorry if this is a dumb question

Hey. There are no dumb questions, dw. Make sure that you have connected the "playlist.js" and "player_style.css" file properly. To me it looks like there is no CSS or JavaScript being applied since there is no song info being shown. If that's all alright, could you show me your code? You can message me here or send me an e-mail, if you're not comfy sharing it on the forum.

[DorianBay]

stupid question, but is it possible to make without js? 

also, omg it's so cute and pleasing to look at omfg

There are no stupid questions, dw :3 I would guess that it is possible if you host videos on your own server and use the HTML "video" element, but I think it would only have to have one video in that case and no themes, because JavaScript is used to make websites interactive. While CSS has gone a long way and JS is not needed in some cases anymore, I believe it is needed here. However, I don't know everything so maybe someone else can provide more information :D

Also, thank you for the compliments! I'm really glad you like it :D

[MrsMoe]

Hey. There are no dumb questions, dw. Make sure that you have connected the "playlist.js" and "player_style.css" file properly. To me it looks like there is no CSS or JavaScript being applied since there is no song info being shown. If that's all alright, could you show me your code? You can message me here or send me an e-mail, if you're not comfy sharing it on the forum.

The only thing I've really fiddled with in the js file is the playlist name/id and the first song on it. I don't really know where you're supposed to connect the .js and .css though.

[DorianBay]

The only thing I've really fiddled with in the js file is the playlist name/id and the first song on it. I don't really know where you're supposed to connect the .js and .css though.

You've probably put the .js and .css files in other folders. That's completely fine, but in that case, you need to modify their filepaths in the "player.html" file so that the browser knows which CSS and JS files to apply to the HTML file.

I tried to explain as clear as I could, but if you'd like, here is a good beginner explanation: https://www.w3schools.com/Html/html_filepaths.asp

If you would like a video, search for "HTML relative filepath" on youtube.

Here's my explanation:

In the player.html file (or in whichever file the player is) there is this line of code:

Code

<link rel="stylesheet" href="player_style.css">

The "href" part of that line is responsible for connecting the CSS file with the player.html document. The part between quotation marks is the file path to the CSS file that we are connecting to the player.html document. You have to modify that filepath to point at where your player_style.css file is.

Right now, the href is pointing at the same folder where you put the player.html document. If you moved the player.css file to another folder, it's pointing at nothing. Which means that no CSS is being applied to the player.html document.

Here's how you modify the filepath to point at the correct location of the CSS file. Since you're connecting from player.html file, think of that file as a starting point. Every file that's in the same folder as the player.html file is can be connected just by typing its name into the href part of the element.

If you want to connect a file that's in a sub-folder of the one where player.html is, you would write the folder's name, slash, then "player_style.css".

For example; if I create a folder by name of "new_folder" next to player.html and put "player_style.css" in there, my href would look like this:

Code

<link rel="stylesheet" href="new_folder/player_style.css">

If you have put player_style.css in a folder outside of the folder where player.html is, you need to tell the browser to look outside the folder. To go outside the folder, you need to type ../

For example: if I have player.html in a folder called "music", but the player.css file is in the folder just outside of that one, called CSS_files, then my href would look like this:

Code

<link rel="stylesheet" href="../CSS_files/player_style.css">

Basically "../" means "get out of one folder" and "/" means "get into that folder".

The same logic applies to the src part of the script element. Just change the part in the quotation marks to point at where playlist.js is:

Code

<script src="playlist.js"></script>

I hope that makes it a bit clearer. If you need more help, let me know :3