reEmbed Playlists

Follow

If you inject a YouTube Playlist in your site, our script will automatically replace it with our playlist module.

You can customise the look and feel of the playlists with some simple CSS code. Our script will use the default style for the YouTube playlists. 

 

If you want to inject a custom playlist with your own videos from various sources (YouTube, HTML5, Dailymotion, etc..) you can use our Javascript API.

To inject your playlist, you need to create a div with a unique id. Then you will have to add the API Call to generate your playlist. Example code:

reEmbed.api('setupPlaylist', 'my_playlist_container_id', {
    list: [
        {
            file: '//www.youtube.com/watch?v=dQw4w9WgXcQ',
            image: '//img.youtube.com/vi/dQw4w9WgXcQ/0.jpg',
            title: 'reEmbed test video',
            description: 'This is the text that will appear below the title of the video'
        },
        {
            file: '//www.dailymotion.com/embed/video/x6b3kz',
            image: '//s1.dmcdn.net/tAU9.jpg',
            title: 'This is the second playlist video',
            description: 'This is just another video description'
        }
    ],
    width: 600, 
    height: 300 
} );



The above code will load the playlist module with the default styles. If you want to use your own styles, you have to include the defaultSkin parameter. This parameter can be set to true (which is also the default value) or false. If set to true, the playlist will have no colors and you will have to manually style the elements.

By default, the list of the videos appears on the right side of the video. There is also the option for the list of the videos to be hidden and be visible only if the user clicks on the Playlist button on the toolbar which is placed at the top of the video. To change the appearance of the playlist, use the inlineList parameter. By default, it is set to false. Set it to true if you want to change the appearance of the list. The inlineList is set to true automatically for the YouTube Playlist Embeds (see the screenshots above).

 

If you set the inlineList parameter to false, then you have to include the listbar parameter containing the size value which specifies the width of the list.

reEmbed.api('setupPlaylist', 'my_playlist_container_id', {
    .....
    height: 300,
    defaultSkin: 1,
    inlineList: 0,
    listbar: {
        size: 310
    }
} );

Another optional parameter is the autoplay. By default it is set to false. Set it to true if you want the first video to start automatically.

You can also define which will be the first video. The third parameter is optional in the setupPlaylist function and defines which video will be loaded as the initial video. It is an integer, the index of the first video (using 0-indexing). For example if we want to set the second video as the initial video in our playlist we have to do:

reEmbed.api('setupPlaylist', 'my_playlist_container_id', {
    .....
    height: 300,
    defaultSkin: 1,
    inlineList: 0,
    listbar: {
        size: 310
    }
}, 1 );

 

Have more questions? Submit a request

Comments

  • Avatar
    Ioannis Angelakis

    Καλησπέρα σας, προσπαθώ βάλω αυτή την playlist αλλά κολλάει στο Loading Player. Μπορείτε να το κοιτάξετε; Ευχαριστώ προκαταβολικά.

    https://www.youtube.com/watch?v=QYp-ogeil3s&list=PLQU_pSPH2VXQqFGR5LmWVidZgZ15AkZ4E

  • Avatar
    Dimitrios Elissaios

    Hello Ioannis,

    for a YouTube playlist, just embed it in your page, and our script will handle it. You don't need to use the above code. Just include this iFrame tag

    <iframe width="560" height="315" src="https://www.youtube.com/embed/QYp-ogeil3s?list=PLQU_pSPH2VXQqFGR5LmWVidZgZ15AkZ4E&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

  • Avatar
    Ioannis Angelakis

    Το έκανα αλλά εξακολουθεί να υπάρχει το πρόβλημα με όλους τους browsers μόνο στα playlist. Με τα single videos δεν έχω πρόβλημα.

    http://postimg.org/image/6kwkoho4j/

  • Avatar
    Dimitrios Elissaios

    Hi Ioannis,
    you are correct, there is a slightly issue.
    The reason is that one of the videos in the playlist has been deleted, and we are not handling it correctly. Working on a fix and will keep you posted.

    Thanks for reporting this!

  • Avatar
    Ioannis Angelakis

    Thank you :)

  • Avatar
    Dimitrios Elissaios

    Hi Ioannis,

    we've just released a fix for this.
    Please let us know if it works ok

  • Avatar
    Ioannis Angelakis

    Τώρα είναι οκ αλλά υπάρχει άλλο πρόβλημα. Το playlist έχει 167 videos αλλά με το reembed δείχνει μόνο 47.

  • Avatar
    Ioannis Angelakis
    • δείχνει μόνο 43
  • Avatar
    Dimitrios Elissaios

    Hi Ioannis,

    the YouTube API returns a maximum of 50 videos for playlists.
    At the moment we call it once, and then remove the videos that no longer exist.
    We are working on a solution to make subsequent calls and get the rest of the the playlist.

    Thanks for pointing it out.

  • Avatar
    Ioannis Angelakis

    Great, now i see more than 50 videos. :) Thank you so much guys

  • Avatar
    Patrick Cicere

    Hi, Is there a more in depth tutorial or a link to a working version with a playlist reEmbedded?

Powered by Zendesk