name = esc_html__( 'Video', 'et_builder' ); $this->slug = 'et_pb_video'; $this->fb_support = true; $this->whitelisted_fields = array( 'src', 'src_webm', 'image_src', 'play_icon_color', 'admin_label', 'module_id', 'module_class', ); $this->options_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => esc_html__( 'Video', 'et_builder' ), 'overlay' => esc_html__( 'Overlay', 'et_builder' ), ), ), 'advanced' => array( 'toggles' => array( 'play_icon' => esc_html__( 'Play Icon', 'et_builder' ), ), ), ); $this->custom_css_options = array( 'video_icon' => array( 'label' => esc_html__( 'Video Icon', 'et_builder' ), 'selector' => '.et_pb_video_play', ), ); $this->advanced_options = array( 'background' => array( 'options' => array( 'background_color' => array( 'depends_to' => array( 'custom_padding', ), 'depends_to_responsive' => array( 'custom_padding', ), 'depends_show_if_not' => array( '', '|||', ), 'is_toggleable' => true, ), ), ), 'custom_margin_padding' => array( 'css' => array( 'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling ), 'custom_padding' => array( 'responsive_affects' => array( 'background_color', ), ), ), 'max_width' => array(), 'filters' => array(), ); } function get_fields() { $fields = array( 'src' => array( 'label' => esc_html__( 'Video MP4/URL', 'et_builder' ), 'type' => 'upload', 'option_category' => 'basic_option', 'data_type' => 'video', 'upload_button_text' => esc_attr__( 'Upload a video', 'et_builder' ), 'choose_text' => esc_attr__( 'Choose a Video MP4 File', 'et_builder' ), 'update_text' => esc_attr__( 'Set As Video', 'et_builder' ), 'description' => esc_html__( 'Upload your desired video in .MP4 format, or type in the URL to the video you would like to display', 'et_builder' ), 'toggle_slug' => 'main_content', 'computed_affects' => array( '__video', ), ), 'src_webm' => array( 'label' => esc_html__( 'Video Webm', 'et_builder' ), 'type' => 'upload', 'option_category' => 'basic_option', 'data_type' => 'video', 'upload_button_text' => esc_attr__( 'Upload a video', 'et_builder' ), 'choose_text' => esc_attr__( 'Choose a Video WEBM File', 'et_builder' ), 'update_text' => esc_attr__( 'Set As Video', 'et_builder' ), 'description' => esc_html__( 'Upload the .WEBM version of your video here. All uploaded videos should be in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers.', 'et_builder' ), 'toggle_slug' => 'main_content', 'computed_affects' => array( '__video', ), ), 'image_src' => array( 'label' => esc_html__( 'Image Overlay URL', 'et_builder' ), 'type' => 'upload', 'option_category' => 'basic_option', 'upload_button_text' => esc_attr__( 'Upload an image', 'et_builder' ), 'choose_text' => esc_attr__( 'Choose an Image', 'et_builder' ), 'update_text' => esc_attr__( 'Set As Image', 'et_builder' ), 'additional_button' => sprintf( '', esc_attr__( 'Generate From Video', 'et_builder' ) ), 'additional_button_type' => 'generate_image_url_from_video', 'additional_button_attrs' => array( 'video_source' => 'src', ), 'classes' => 'et_pb_video_overlay', 'description' => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display over your video. You can also generate a still image from your video.', 'et_builder' ), 'toggle_slug' => 'overlay', 'computed_affects' => array( '__video_cover_src', ), ), 'play_icon_color' => array( 'label' => esc_html__( 'Play Icon Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'play_icon', ), 'disabled_on' => array( 'label' => esc_html__( 'Disable on', 'et_builder' ), 'type' => 'multiple_checkboxes', 'options' => array( 'phone' => esc_html__( 'Phone', 'et_builder' ), 'tablet' => esc_html__( 'Tablet', 'et_builder' ), 'desktop' => esc_html__( 'Desktop', 'et_builder' ), ), 'additional_att' => 'disable_on', 'option_category' => 'configuration', 'description' => esc_html__( 'This will disable the module on selected devices', 'et_builder' ), 'tab_slug' => 'custom_css', 'toggle_slug' => 'visibility', ), 'admin_label' => array( 'label' => esc_html__( 'Admin Label', 'et_builder' ), 'type' => 'text', 'description' => esc_html__( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ), 'toggle_slug' => 'admin_label', ), 'module_id' => array( 'label' => esc_html__( 'CSS ID', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), 'module_class' => array( 'label' => esc_html__( 'CSS Class', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), '__video' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Video', 'get_video' ), 'computed_depends_on' => array( 'src', 'src_webm', ), 'computed_minimum' => array( 'src', 'src_webm', ), ), '__video_cover_src' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Video', 'get_video_cover_src' ), 'computed_depends_on' => array( 'image_src', ), 'computed_minimum' => array( 'image_src', ), ), ); return $fields; } static function get_video( $args = array(), $conditional_tags = array(), $current_page = array() ) { $defaults = array( 'src' => '', 'src_webm' => '', ); $args = wp_parse_args( $args, $defaults ); $video_src = ''; if ( false !== et_pb_check_oembed_provider( esc_url( $args['src'] ) ) ) { $video_src = wp_oembed_get( esc_url( $args['src'] ) ); } else { $video_src = sprintf( ' ', ( '' !== $args['src'] ? sprintf( '', esc_url( $args['src'] ) ) : '' ), ( '' !== $args['src_webm'] ? sprintf( '', esc_url( $args['src_webm'] ) ) : '' ) ); wp_enqueue_style( 'wp-mediaelement' ); wp_enqueue_script( 'wp-mediaelement' ); } return $video_src; } static function get_video_cover_src( $args = array(), $conditional_tags = array(), $current_page = array() ) { $defaults = array( 'image_src' => '', ); $args = wp_parse_args( $args, $defaults ); $image_output = ''; if ( '' !== $args['image_src'] ) { $image_output = et_pb_set_video_oembed_thumbnail_resolution( $args['image_src'], 'high' ); } return $image_output; } function shortcode_callback( $atts, $content = null, $function_name ) { $module_id = $this->shortcode_atts['module_id']; $module_class = $this->shortcode_atts['module_class']; $src = $this->shortcode_atts['src']; $src_webm = $this->shortcode_atts['src_webm']; $image_src = $this->shortcode_atts['image_src']; $play_icon_color = $this->shortcode_atts['play_icon_color']; $video_src = self::get_video( array( 'src' => $src, 'src_webm' => $src_webm, ) ); $image_output = self::get_video_cover_src( array( 'image_src' => $image_src, ) ); $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name ); $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); if ( '' !== $play_icon_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%% .et_pb_video_overlay .et_pb_video_play', 'declaration' => sprintf( 'color: %1$s;', esc_html( $play_icon_color ) ), ) ); } $output = sprintf( '