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 (one-time payment for lifetime access).

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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Well, this was working, now it’s not. I need to change some of the parameters because the videos are WAY too large. So I probably need 4 to 6 videos across a full-width browser window. Also, I had tried to put this in a reusable part, but that was failing to show up in design mode and then on the front end. I reset everything back to the exact code given here on this page. No go. Tried to put it back as a section on the page instead of a usable. Nope. Just doesn’t show up at all any more. Best I can figure is that installing Oxygen 2.1 beta 1 broke it and either the plugins or code are no longer compatible. Super disappointing because I really needed to get this project done 3 weeks ago. Please don’t tell me I must have messed up resetting everything back to the default code shown here. I have not. I’ve been over this a bazillion times. At this time there are 2 deviations from what’s on this page. They are:

    In the My Custom Functionality plugin:
    if ( is_page( 'Development Scratchpad' ) ) {
    because I don’t want this on the front page yet.

    and in the css:
    text-transform: none;
    because shouting is almost always wrong.

    If you feel like looking at the page it’s https://www.girlsrockradio.com/development-scratchpad/

    • Have you changed the dimensions of the featured image by changing the width and height in this line?

      add_image_size( 'video-image', 480, 360, true );
      

      If you can send me your WP login via the Contact page, I can take a look and see what’s wrong.

  • I have resolved the issue and am moving forward with this.

    **Questions: **
    1) Why PODS? I already own ACF Pro per a previous conversation we had about whether your tutorials were going to rely on a bunch of other costly plugins. You mentioned that ACF was on a short list of plugins that was basically essential, and after looking at ACF Pro and finding its price super-reasonable, I purchased it and comment back to you on that purchase. Is there something for this tutorial that PODS brings to the table that ACF Pro does not?

    2) I need to know how to resize the svg play icon in this tutorial. I’ve been able to resize the image panels themselves, but I’m not familiar enough with svg’s to reset their size. I need to work on that. I’m finding svg’s everywhere these days.

    I’ll probably have more questions. Stay tuned.

    [ps., your site is not sending me notifications of new comments even though I checked that box. As I recall there was some sort of error about the account I’m using on wordpress.com sorry I cannot be more specific than that; it was a while ago and I was not able to give it the attention it deserved when it happened, so now apparently I’m screwed where notifications are concerned. Hence the super long time to reply to this.]

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: