Add a YouTube Carousel

November 28, 2017

Example Video Slider – View in live Site >

Requirements

How to add a Video Slider component

The UBCO Video Slider plugin can be used to make a YouTube Video carousel. The plugin allows users to generate a shortcode that places a YouTube Video Carousel on any page or post. To create a carousel:

  1. Go to the page or post that you want to display the slider.
  2. Click on ‘Add New Page Section’ -> ‘Page Section’ -> ‘Add New Inside Content Row’ -> select the columns you prefer -> ‘Add Component’ -> ‘Standard Editor’
  3. Click on the ‘Add UBCO Video Slider’ button
  4. On the options screen, enter the id of your YouTube playlist. For multiple playlists, separate playlist IDs with a comma. For help finding your playlist id, see How to find the YouTube playlist ID.
  5. Title – you can specify a title for your video slider
  6. Thumbnail Width – width of each slide’s thumbnail
  7. Thumbnail Margin – the margin between each slide
  8. Container Margin – sets the specified margin around the slider.
  9. Open Video as a popup – If set to yes, the video will open as a popup. If set to no, the video will open on YouTube.
  10. Show View Count – If set to yes, number of views for each video will be displayed.
  11. Look and Feel – select from the following look and feel of sliders (e.g. Standard, Transparent, and Standard Red).
  12. Max Slides – sets the maximum number of slides to display
  13. Auto-play Slides – the slider will autoplay upon page load
  14. Press the “Insert Shortcode” and it will insert the shortcode to the editor.
  15. Click Preview to often test your video slider. Make edits as necessary.
  16. Publish/Update when ready to go live.

How to Find the YouTube Playlist Id?

  1. Go to your YouTube Channel
  2. Click on the Playlists tab and click the playlist that you want to display

Click on the Playlist tab on your YouTube Channel Page

 

3. As the playlist opens up, copy the id from the URL bar.

Copy the playlist Id from the URL bar

How to get a YouTube API Key?

  1. Go to Google Developers Console and log in with your Google account.
  2. Create the new project (name does not matter for the plugin).
  3. Go to your project (by clicking on its name in the list).
  4. In the sidebar on the left, expand APIs & Services. Next, click Library. Search for YouTube, and select the YouTube Data API (v3) and enable it.
  5. On the YouTube Data API v3 page, click on the Create Credentials button to generate an API Key.
  6. You will be calling the API from a web browser and will be accessing publicly available data.
  7. Copy and paste the generated API key to the plugin’s settings page.

 

Posted in