The Divi theme is a popular WordPress theme that includes a video module for adding videos to your website. To add a video using the Divi video module, you can use the following code snippet:
function wpsnippets_add_divi_video_module() {
ob_start();
?>
<div class="et_pb_video_overlay"></div>
<div class="et_pb_video">
<video src="your-video-url.mp4" autoplay loop muted></video>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'divi_video_module', 'wpsnippets_add_divi_video_module' );
This code snippet creates a custom shortcode called [divi_video_module] that can be used to display a video using the Divi video module. The video URL should be replaced with the actual URL of your video.
To use this code snippet, you can add it to your theme’s functions.php file or create a custom plugin. Once added, you can use the [divi_video_module] shortcode in any post or page to display the video.
This code snippet can be useful when you want to add a video using the Divi video module in a custom location or in combination with other content on your website.
Examples
Example 1: Adding a Video Module to a Divi Page
This example demonstrates how to add a video module to a Divi page using the Divi Builder API. The code snippet below creates a new section with a video module and sets the video URL and other settings.
function wpsnippets_add_video_module() {
if ( class_exists( 'ET_Builder_Module' ) ) {
class ET_Builder_Module_Video extends ET_Builder_Module {
public $slug = 'et_pb_video';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => 'https://www.elegantthemes.com/gallery/divi/',
'author' => 'Elegant Themes',
'author_uri' => 'https://www.elegantthemes.com/',
);
public function init() {
$this->name = esc_html__( 'Video', 'et_builder' );
$this->plural = esc_html__( 'Videos', 'et_builder' );
$this->slug = 'et_pb_video';
$this->vb_support = 'on';
$this->child_slug = 'et_pb_video_item';
$this->child_item_text = esc_html__( 'Video Item', 'et_builder' );
$this->child_items_text = esc_html__( 'Video Items', 'et_builder' );
$this->settings_modal_toggles = array(
'general' => array(
'toggles' => array(
'main_content' => esc_html__( 'Video', 'et_builder' ),
),
),
'advanced' => array(
'toggles' => array(
'video' => esc_html__( 'Video', 'et_builder' ),
),
),
);
}
public function get_fields() {
return array(
'title' => array(
'label' => esc_html__( 'Title', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter a title for this video module.', 'et_builder' ),
'toggle_slug' => 'main_content',
),
'url' => array(
'label' => esc_html__( 'Video URL', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter the URL of the video you want to display.', 'et_builder' ),
'toggle_slug' => 'main_content',
),
);
}
public function shortcode_callback( $atts, $content = null, $function_name ) {
$module_id = $this->shortcode_atts['module_id'];
$title = $this->shortcode_atts['title'];
$url = $this->shortcode_atts['url'];
ob_start();
?>
<div class="et_pb_video_container">
<div class="et_pb_video_overlay"></div>
<video class="et_pb_video" src="<?php echo esc_url( $url ); ?>" controls="controls"></video>
</div>
<?php
return ob_get_clean();
}
}
new ET_Builder_Module_Video();
}
}
add_action( 'wp_loaded', 'wpsnippets_add_video_module' );
This code adds a custom video module to the Divi Builder, allowing users to easily add videos to their Divi pages. The wpsnippets_add_video_module function creates a new class ET_Builder_Module_Video that extends the ET_Builder_Module class. It defines the module’s name, settings, and fields. The shortcode_callback method generates the HTML output for the video module.
Example 2: Customizing Video Module Settings
This example demonstrates how to customize the settings of the video module added in Example 1. The code snippet below modifies the get_fields method to add additional settings for autoplay and loop.
public function get_fields() {
return array(
'title' => array(
'label' => esc_html__( 'Title', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter a title for this video module.', 'et_builder' ),
'toggle_slug' => 'main_content',
),
'url' => array(
'label' => esc_html__( 'Video URL', 'et_builder' ),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__( 'Enter the URL of the video you want to display.', 'et_builder' ),
'toggle_slug' => 'main_content',
),
'autoplay' => array(
'label' => esc_html__( 'Autoplay', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'options' => array(
'on' => esc_html__( 'Yes', 'et_builder' ),
'off' => esc_html__( 'No', 'et_builder' ),
),
'description' => esc_html__( 'Enable autoplay for the video.', 'et_builder' ),
'toggle_slug' => 'video',
),
'loop' => array(
'label' => esc_html__( 'Loop', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'options' => array(
'on' => esc_html__( 'Yes', 'et_builder' ),
'off' => esc_html__( 'No', 'et_builder' ),
),
'description' => esc_html__( 'Enable looping for the video.', 'et_builder' ),
'toggle_slug' => 'video',
),
);
}
This code extends the get_fields method of the ET_Builder_Module_Video class to include two additional settings: autoplay and loop. These settings allow users to control whether the video should autoplay and loop. The settings are added to the “Video” toggle in the module settings modal.
Example 3: Customizing Video Module Output
This example demonstrates how to customize the HTML output of the video module added in Example 1. The code snippet below modifies the shortcode_callback method to add a custom class to the video container.
public function shortcode_callback( $atts, $content = null, $function_name ) {
$module_id = $this->shortcode_atts['module_id'];
$title = $this->shortcode_atts['title'];
$url = $this->shortcode_atts['url'];
ob_start();
?>
<div class="et_pb_video_container custom-video-container">
<div class="et_pb_video_overlay"></div>
<video class="et_pb_video" src="<?php echo esc_url( $url ); ?>" controls="controls"></video>
</div>
<?php
return ob_get_clean();
}
This code modifies the shortcode_callback method of the ET_Builder_Module_Video class to add a custom class custom-video-container to the video container <div>. This allows users to apply custom CSS styles to the video module by targeting the specific class.