Video Carousel Block

The Video Carousel Block is a component designed to showcase a collection of videos in a dynamic, horizontally scrolling slider. Each video is represented by a thumbnail and title. When a user clicks on a video, it opens and plays in a pop-up modal window, providing an immersive viewing experience without navigating away from the page.

Example on the current website

-   Example: View live example

-   Preview with image:

-   Editor preview:

Content Editor Fields

This block functions by pulling in content from pre-existing "Video" posts. Therefore, the content for the carousel is managed in two places: the block itself and the individual "Video" posts.

Block-Level Fields

• Heading:

  • Description: The main title displayed above the video carousel.
  • Usage: Enter a concise heading for the entire section (e.g., "Watch Our Latest Videos," "Behind the Scenes").
  • Requirement: Optional.

• Videos:

  • Description: A relationship field used to select which "Video" posts will appear in the carousel.
  • Usage: Search for and select one or more "Video" posts. The order in which you select them will determine their order in the carousel.
  • Requirement: At least one "Video" post must be selected for the block to render.

"Video" Post Fields

To create the items that appear in the carousel, you must first create entries in the "Videos" custom post type area of the WordPress admin. Each "Video" post has the following fields:

• WordPress Title:

  • Description: The title of the video, which is displayed below the thumbnail in the carousel.
  • Usage: Enter a clear and descriptive title for the video.
  • Requirement: Required.

• Featured Image:

  • Description: The thumbnail image for the video in the carousel.
  • Usage: Upload a high-quality image that represents the video. If not provided, a default placeholder may be used.
  • Requirement: Highly recommended.

• Video Type:

  • Description: A custom field to specify the video hosting platform.
  • Usage: Select from a dropdown list (e.g., YouTube, Vimeo). This is used to construct the correct video player embed.
  • Requirement: Required.

• Video ID:

  • Description: The unique identifier for the video from its hosting platform.
  • Usage: For a YouTube URL like https://www.youtube.com/watch?v=dQw4w9WgXcQ, the ID is dQw4w9WgXcQ.
  • Requirement: Required.

Example Usage:

Steps:

1. Create the Video Content:

   • In the WordPress admin, navigate to "Videos" and click "Add New".
   • Set the WordPress Title to "A Day at the Aquarium".
   • Upload a Featured Image to be used as the thumbnail.
   • Set the Video Type to YouTube.
   • Enter the Video ID (e.g., Abc123XyZ).
   • Publish the video post. Repeat for other videos you want to feature.

2. Add the Block to a Page:

   • Edit the page where you want the carousel to appear.
   • Insert the Video Carousel Block.
   • Set the block's Heading to "Explore Our World".
   • In the Videos field, search for and select "A Day at the Aquarium" and any other videos you created.
   • Save the page.

Result:

The block will render a full-width section containing a heading and a carousel of video thumbnails. Users can scroll horizontally through the videos using the provided navigation arrows. Clicking on any video thumbnail will open a pop-up modal overlay, which will automatically embed and play the corresponding video. Clicking the close button or outside the video will close the modal.

Benefits:

• Engaging User Experience: The modal pop-up allows for focused video consumption without leaving the page.
• Organized Content: Keeps video content neatly managed within its own "Videos" post type.
• Space-Efficient: Displays numerous videos in a compact, interactive slider.
• Reusable: Video posts can be created once and used in multiple carousels across the site.

Conclusion:

The Video Carousel Block is an excellent tool for showcasing a gallery of videos in a clean and interactive format. By combining a smooth-scrolling carousel with an elegant modal player, it provides a professional and user-friendly way to feature video content.