DEMO: Three Playlists with Default Settings

Here we have three playlists with default settings.

Video Playlist Title

View the page source code for helpful comments

MyList Video Gallery CSS, Javascript and Settings

Include the following block of code within the <head> portion of your HTML code. Swap in your desired YouTube playlist IDs in the "var playListID =" in the "MyList Gallery Settings" section. Playlist IDs should be in quotes and seperated by commas.

<!-- MyList Styles -->
<link href="mylist-gallery/css/mylist-player.css" rel="stylesheet">

<!-- MyList Gallery Settings -->
<script type="text/javascript">
    // include the youtube playlist id for each playlist
    // place quotation marks around each and seperate by comma
    var playListID = [
        "PLSSPBo7OVSZsthvEQhtu2sZ1G9GUAnnZ7", 
        "PLSSPBo7OVSZu820GHiO3qjYRT2oL2V9wM", 
        "PLSSPBo7OVSZszs6coWD3nnAhJyVe_2drG"
    ];
    var apiKey = "AIzaSyBkccck_IUthtzM1klSnuuuQbDIf11T2Ok";
    var autoPlayNext = 1;
    var showPlayerControls = 1;
    var showTitlesInList = 1;
</script>

<!-- jQuery -->
<!-- The MyList Video Gallery requires jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- MyList Javascript -->
<script src="mylist-gallery/js/mylist-player.js" defer></script>

The Playlist

Include the following block of code within the <body> of your HTML code. Copy/paste for each playlist. The first playlist should have id="player-container1", the second should have id="player-container2", the third should have id="player-container3".

<div id="player-container1" class="player-container">
    <!-- Playlist Title - style this how you want using the '.player-container h3' class -->
    <h3>Video Playlist Title</h3> 
    <!-- left and right arrows -->
    <div class="mlvp-arrows">
        <div class="mlvp-arrow-left"><i class="demo-icon icon-left-open">&#xe800;</i></div>
        <div class="mlvp-arrow-right"><i class="demo-icon icon-right-open">&#xe801;</i></div>
    </div>
    <!-- playlist thumbnails and titles -->
    <div class="mlvp-list-container">
        <div class="mlvp-list noselect" ></div>
    </div>
</div>

The YouTube Player

Include the following block of code within the <body> of your HTML code. This is the code for the full-screen YouTube video player. This block of code should only appear once as it is shared by all of your playlists.

<div class="mlvp-container">
    <div class="mlvp-close"><img src="mylist-gallery/fonts/mlvp-close.svg" onClick="hide_mlvp();"></div>
    <div id="vid_frame"></div>
</div>

Apr 5, 2023