Iframe music player that uses youtube playlists.
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
drakonic f9cf49ce75 new toggle: autoplay 2 months ago
LICENSE Initial commit 2 months ago
README.md new toggle: autoplay 2 months ago
howto.md Update 'howto.md' 2 months ago
niumusicplayer.js new toggle: autoplay 2 months ago



Iframe music player that uses youtube playlists.


How to put this on your site

1. Upload the .js file to your site

2. The HTML tags

The minimal version:

<div id="player" playlist="PLfgjZUmExyGsnvWRVVCyoNJzW6Bm81zMg"></div>
<button onclick="pauseplay()">play/pause</button>
<div id="nowplaying"></div>
<script src="/niumusicplayer.js"></script>

Breakdown of what everything is:

  • The player div will be replaced with an iframe that plays the music. Put your playlist's id in the playlist attribute. The id is the part that goes after ?list= in the URL of a youtube playlist. If you want your playlist to be shuffled, put in a shuffle="yes" attribute, if you want the player to autoplay, add in autoplay="yes".
  • The button controls pausing/playing. You can use any HTML tag, as long as it has the onclick="pauseplay()" attribute.
  • The second div displays the title of the currently playing video. You can also use any HTML tag for this, as long as its id is nowplaying. You could make a scrolling title with a marquee, for example
  • Script tag linking to the .js file

The full version:

<div id="niuplayer">
        <div id="player" playlist="PLfgjZUmExyGsnvWRVVCyoNJzW6Bm81zMg" shuffle="yes"></div>
        <button onclick="pauseplay()">play/pause</button>
        <button onclick="player.previousVideo()">prev</button>
        <button onclick="player.nextVideo()">next</button>
        <div id="nowplaying"></div>
        <div id="nextup"></div>
        <script src="niumusicplayer.js">

Let's go over the extras:

  • A div wrapper, for easier styling
  • Previous/next buttons. Again, can be any element as long as it has the same onclick
  • The nextup div shows the next track in the playlist. Similar deal to the nowplaying one.

3. Styling

Style the player to your liking. Here's something basic:

#niuplayer {
    border: solid 5px black;
    padding: 1em;
    background-color: #c2c2c2;
#niuplayer button {
    background-color: #fff;
    border: solid 5px black;
    padding: 0.5em;

And that's it. If you like, you can link back to this repo, so that others can find it too, but it's not required.