BANC

Background Video Block

The Background Video Template defines the HTML structure and content displayed within the Gutenberg editor for the Background Video Block. It is responsible for displaying a video in the background of a section, along with a heading, excerpt, and optional call-to-action.

Content Editor Fields

Heading

  • Description: The main heading text displayed above the excerpt.
  • Usage: Use this field to provide a clear title for the section.
  • Optional: If no heading is provided, this element will not be displayed.

Excerpt

  • Description: A short description or paragraph of text displayed below the heading.
  • Usage: Use this field to provide more context or information about the section.
  • Optional: If no excerpt is provided, this element will not be displayed.

Call-to-Action (CTA)

  • Description: A call-to-action element, which can be a link or a button.
  • Usage: Use this field to encourage the user to take a specific action.
  • Optional: If no CTA is provided, this element will not be displayed.

Video

  • Description: The video to be displayed in the background.
  • Usage: Use this field to embed a video.
  • Mandatory: This field is mandatory. If no video is provided, the block will not display any video.

Example Usage:

Steps:

  1. Add the block: Insert the Background Video Block into your page or post.
  2. Fill the fields:
    • In the block settings, fill the "Heading", "Excerpt", "CTA", and "Video" fields.
  3. Save the Block: Your Background Video block is now ready for display!

Result:

When properly configured, the Background Video Block will render a section with a background video, a heading, an excerpt, and an optional call-to-action. The video will be displayed in the background, and the text content will be overlaid on top of it.

background-video with image

Preview in the editor (body):

background-video in body

Customization:

You can customize the Background Video Block display in the following ways:

  • Content Customization: Change the heading, excerpt, and CTA text directly within the block settings.
  • Video Customization: Change the video embed code in the "Video" field.

Benefits:

  • Engaging Visuals: The background video creates an engaging visual experience.
  • Clear Structure: The template provides a simple and organized HTML structure.
  • Dynamic Content: The template allows for dynamic content to be inserted.
  • Easy to Use: It is simple to configure for the end user.
  • Responsive: The video is responsive.
  • Customizable: The block is customizable.