Video Block Component Documentation

Overview

The Video Block component is a component designed to display videos from popular platforms like YouTube and Vimeo. It allows for embedding videos within a webpage, with optional header and text content. The component is customizable, supporting alignment and CSS class modifications.

Model Documentation

Model Structure

The Video Block component relies on the following model structure:

id: A unique identifier for the video block section.

cssClass: Additional CSS classes for styling the video block.

header: (Optional) A header text to be displayed above the video.

text: (Optional) Text content to be displayed under the header and above the video.

link: The URL of the video to be embedded.

alignment: Alignment of the header and text content, with values ranging from 1 (left), 2 (center), to 3 (right).

Example Model

Here’s an example of how the model might be structured:

Component Structure

The Video Block component consists of the following sections:

HTML Template: Defines the structure of the video block, including the video, header, and text content.

JavaScript: Handles the component's logic, including parsing video URLs and setting up embedded video links.

Data: Contains the model data and properties like videoUrl and embeddedUrl.

Methods: Includes helper methods for parsing YouTube and Vimeo URLs and aligning content.

HTML Template

The HTML template defines the structure of the Video Block component.

Explanation of HTML Elements:

section: The main container for the video block, with dynamic id and cssClass attributes.

header: Displays the header text, if provided, and aligns it based on the alignment value.

text: Displays optional text content below the header.

iframe: Embeds the video using the parsed embeddedUrl, ensuring the video occupies the full available width and height.

JavaScript

The JavaScript section handles the core logic of the Video Block component, including parsing video URLs and setting up the embedded video link.

Component Definition

Explanation of JavaScript Code:

Props: The model object contains the content and settings for the video block.

Data:

data: Holds the model data for easy access.

videoUrl: Stores the raw video URL provided in the model.

embeddedUrl: Stores the formatted video URL suitable for embedding.

Mounted: On component mount, the videoUrl is parsed and formatted into an embeddable link based on whether it's a YouTube or Vimeo link.

Methods:

youtube_parser(): Extracts the video ID from a YouTube URL and returns it for embedding.

vimeo_parser(): Extracts the video ID from a Vimeo URL and returns it for embedding.

getAlignmentClass(): Returns the appropriate alignment class based on the alignment value in the model.

Video

Video Block Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

Explanation of HTML Elements:#

JavaScript#

Component Definition#

Explanation of JavaScript Code:#