12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Sep 14, 2018

Custom YouTube Video Carousel using Pods and Owl in Oxygen

Sridhar Katakam

In this members-only tutorial, we shall build a custom YouTube video carousel with videos playing in a lightbox when the thumbnail is clicked by

  • registering a Custom Post Type called `video` having a `video_url` custom field
  • adding video entries while providing the URL of a YouTube video in each
  • adding a Code Block in Oxygen with the code to output the video entry image (featured image and if not present, video thumb from YouTube), title and URL using a custom WordPress query and loop, initializing Owl carousel on the videos container and adding the necessary CSS

in Oxygen.

Requirement: The ability to upload files to a plugin directory. This needs to be done via cPanel file manager or a FTP client.

Step 1

Install and activate my custom functionality plugin.

Upload owl.carousel.min.css and owl.theme.default.min.css to the plugin's assets/css directory and owl.carousel.min.js to plugin's assets/js directories via a FTP client.

Step 2

Install and activate Pods.

Add a new video post type.

Add a video_url Website type custom field.

In the Advanced Options tab, tick "Featured Image" under Supports.

Save the pod.

Step 3

Let's load the CSS and JS files of Owl on the page where the slider is to be shown (homepage in this example) and register a custom size for images in the carousel.

Edit plugin's plugin.php file.

Replace the code inside sk_enqueue_files() with:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right