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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: