1. Quick install
After you downloaded your Joomla extension, just go to Extensions -> Extension Manager -> select the Upload Package File from the top tabs -> click on the Choose File button and select the ES Youtube Playlist Embed zip file -> click on the Upload & Install blue button.
Your module will now appear in the Module Manager section.
In the Extensions -> Module Manager section, find your ES Youtube Playlist Embed module and click on it to access the module's setup section.
You can find all the module's options under the "Set Up" Tab.
First, from the right side of the page change the Status of the module into Published, put it into the desired position and, if you want your module to be displayed with a title, select from the right Show at the Show Title section. Last, give your module the title that you want it to be displayed with.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
2. Setup ES Youtube Playlist Embed
First, you have to place the code from the Youtube playlist in the "Playlist id" field.
Then, you can set the no. of items/ videos you want to display inside the playlist, select whether you want the player autoplay the videos or not, and the no of characters for the description of each video.
Visual options
Here, you can set the player's width, margin, description font size, alignment of the player and if you want to clear the space around it (Clear).
If you want to place the module inside an article, let's say... on the left side and on the right side you will have text, you will have the following settings:
- Player width: 50%
- Margin: 0 10px 0 0
- Alignment: Left
- Clear: none
If you want a smaller player, but not surrounded by text, you will have something like this:
- Player width: 70%
- Margin: 0 auto (so that the module stays centered)
- Alignment: None
- Clear: Both
Colors
Just play with the colors until you find the perfect design!
More Customization
If you need some custom CSS, you can place it here.
For example, if you want the thumbs from each video displayed left, you will need to place here the following custom CSS:
.thumb_yple {
width: 20%;
float: left;
}
.details {
max-width: 77% !important;
}
