Thank you for purchasing the MyList Video Gallery! Below are the installation and configuration instructions. If you have any questions please email me at mike@woosterwebdesign.com
Installation
2. Include the necessary files
You will need to load jQuery, the mylist-player javascript file and the mylist-player css file. To do this, add the following code into the <head> portion of your webpage:
<!-- MyList Styles -->
<link href="mylist-gallery/css/mylist-player.css" rel="stylesheet">
<!-- MyList Gallery Settings -->
<script type="text/javascript">
// include a youtube playlist id for each playlist,
// place quotation marks around each and seperate by commas.
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="https://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>
Notes
- Double check that you don't already have the jQuery files included.
- Ensure that you are loading mylist-player.js AFTER you load jQuery.
- This code does not have to go in the <head>. It is common to place the CSS <link> in the <head> and the <script> elements just before the closing <body> tag.
3. Add your YouTube playlist IDs
Copy and paste your desired YouTube playlist IDs into the MyList Gallery Settings section of the code you just pasted into the <head> portion of your webpage.
var playListID = [
"PLSSPBo7OVSZsthvEQhtu2sZ1G9GUAnnZ7",
"PLSSPBo7OVSZu820GHiO3qjYRT2oL2V9wM",
"PLSSPBo7OVSZszs6coWD3nnAhJyVe_2drG"
];
4. Add the necessary HTML
For The Playlists
Include the following block of code within the 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"></i></div>
<div class="mlvp-arrow-right"><i class="demo-icon icon-right-open"></i></div>
</div>
<!-- playlist thumbnails and titles -->
<div class="mlvp-list-container">
<div class="mlvp-list noselect" ></div>
</div>
</div>
For The Video 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>
That's it! You're MyList Video Gallery is ready for prime time. Read on to see how to configure a few more options.
Optional Settings
There are a few optional settings for the player which can be changed in the MyList PLAYER SETTINGS section of the code you pasted into the <head> portion of your webpage:
<!-- MyList PLAYER SETTINGS -->
<script type="text/javascript">
// include a youtube playlist id for each playlist,
// place quotation marks around each and seperate by commas.
var playListID = [
"PLSSPBo7OVSZsthvEQhtu2sZ1G9GUAnnZ7",
"PLSSPBo7OVSZu820GHiO3qjYRT2oL2V9wM",
"PLSSPBo7OVSZszs6coWD3nnAhJyVe_2drG"
];
var apiKey = "AIzaSyBkccck_IUthtzM1klSnuuuQbDIf11T2Ok"; // this default YouTube API key will work but you should change it to your own
var autoPlayNext = 0; // auto play next video in list when current ends? 0 for no. 1 for yes.
var showPlayerControls = 1; // display YouTube video player controls? 0 for no. 1 for yes.
var showTitlesInList = 1; // display video titles under each thumbnail in playlist? 0 for no. 1 for yes.
</script>
apiKey
The default YouTube API key will work but you should change it to your own. For help with obtaining an API key visit: https://developers.google.com/youtube/v3/getting-started#before-you-start
autoPlayNext
Do you want to auto play the next video in the list when the current ends? 0 for no. 1 for yes.
showPlayerControls
Display YouTube video player controls? 0 for no. 1 for yes.
showTitlesInList
Display video titles under each thumbnail in playlist? 0 for no. 1 for yes.
Colors
You can change default and hover state colors for the left and right arrows as well as colors for the titles that appear under each thumbnail in the playlist. Those colors are defined in the mylist-player.css file at the top under the COLORS section.
/* COLORS
############################### */
/* color of titles that appear below
each thumbnail image in the playlist */
.vid-item .desc {
color: #111;
}
.vid-item:hover .desc {
color: #CC181E; /* <-- hover state color of titles */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
/* color of playlist arrows */
.mlvp-arrow-left, .mlvp-arrow-right {
color: #111;
}
/* hover color of playlist arrows */
.mlvp-arrow-left:hover, .mlvp-arrow-right:hover {
color: #CC181E;
}
Demos
Default Demo: Three playlists with default settings
Note: These demos may not work when testing them locally as the YouTube API really only works when serverd from a domain.
Version History
Version 1.1 - 1/30/2020
- Removed YouTube's "showinfo" parameter as it was depricated in 2018.
From YouTube API doc's: The showinfo parameter, which indicates whether the player should display information like the video title and uploader before the video starts playing, is also being deprecated. Following the change, the channel avatar and video title will always display before playback begins, when playback is paused, and when playback ends. The avatar being displayed is new behavior that will be consistent across all embedded players.
- Removed YouTube's "rel" parameter as it was changed in 2018.
From YouTube doc's: The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played. If the rel parameter is set to 0, the player will show related videos that are from the same channel as the video that was just played.
Version 1.0 - 5/12/2016
- Initial launch