1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
# Webdeck Player
*Cool music for your cool website!*
The **Webdeck Player** is a player for Youtube playlists coded entirely in Javascript and intended for personal websites. Use it for showing your amazing music taste to your visitors!
**Live demo**: https://music.xgenos.me/
[](https://paypal.me/xgenos)
## Features
- Play Youtube videos saved in playlists
- Integrated video controls (play, pause, volume, shuffling, etc.)
- Playlist selector - select between your defined playlists
- Themes - customize the player with the included themes or create your own!
- Very easy to use
- Written in pure modern Javascript - no weird stuff!
- Lightweight
- aesthetic™
## Downloads
Releases section: https://git.xgenos.me/webdeck-player
## Instructions
*(read these instructions also on the [website](https://music.xgenos.me/))*
Getting started with the Webdeck Player is very simple. Follow this tutorial and you'll get your copy of the player running in a few minutes!
### Installing the player
1. Go to the Releases section of the Github repository and download the latest version available. You should get a `webdeck-player-v.X.X.X.zip` file.
2. Unzip the file and put the `webdeck-player` folder into your website root folder.
3. a. **Run the player on a separate browser window (recommended)**
- The player is designed to work inside a container of 600x250 pixels. You can make the player open in a new browser window - it will look great and visitors can navigate the rest of your site while keeping the player running! To do it, place a tag like the following in your site:
`<button onclick="window.open('/webdeck-player/index.html', 'Web Deck Player', 'height=250, width=600')">Open Web Deck Player</button>`
This code creates a button that will open a window with the specified height and width containing the player.
3. b. **Run the player inside an iframe**
- You can also run the player inside a page of your site using an iframe tag. To do it, you can write the following tag in the HTML of your page:
`<iframe src="/webdeck-player/index.html" height="250" width="600"></iframe>`
### Adding playlists
Go to the `script.js` file inside the webdeck-player folder. There you can follow the instructions to change the playlists shown in the player.
### Adding themes
To add a new theme to the player, copy its folder to the themes folder. Then, open the `script.js` file and add it to the list following the instructions.
### Creating a new theme
Themes are just a collection of resources (like images or fonts) and a CSS file to modify the player appearance. You just need basic knowledge about CSS to start! Create a new theme following these steps:
1. Inside the `webdeck-player` folder, locate the themes folder and open it.
2. Choose a theme folder as a base, for example, the default theme. You can modify any other theme.
3. Duplicate your chosen folder and rename it. For example, call it `my-theme`.
4. Add your new theme to the `script.js` file following the instructions inside it.
5. Inside your theme folder, open the `webdeck-player.css` file and modify it to your liking. You can also change the fonts and the images. **Do not rename any image.** Their paths are used in the `script.js` file. The `about.txt` file is for adding a description about the theme and your name.
## About
Created by Chris. Licensed under the MIT License. Some components of the software such as fonts were created by others. In these cases, attribution was given for their work.
|
