name = esc_html__( 'Video', 'et_builder' ); $this->plural = esc_html__( 'Videos', 'et_builder' ); $this->slug = 'et_pb_video'; $this->vb_support = 'on'; $this->settings_modal_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_fields = array( 'video_icon' => array( 'label' => esc_html__( 'Video Icon', 'et_builder' ), 'selector' => '.et_pb_video_play', ), ); $this->advanced_fields = array( 'background' => array( 'options' => array( 'background_color' => array( 'depends_on' => array( 'custom_padding', ), 'depends_on_responsive' => array( 'custom_padding', ), 'depends_show_if_not' => array( '', '|||', ), 'is_toggleable' => true, ), ), ), 'box_shadow' => array( 'default' => array( 'css' => array( 'overlay' => 'inset', ), ), ), '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', ), ), ), 'fonts' => false, 'text' => false, 'button' => false, 'link_options' => false, ); $this->help_videos = array( array( 'id' => esc_html( '3jXN8CBz0TU' ), 'name' => esc_html__( 'An introduction to the Video module', 'et_builder' ), ), ); } 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', ), 'dynamic_content' => 'image', ), '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', 'hover' => 'tabs', ), '__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; } public function get_transition_fields_css_props() { $fields = parent::get_transition_fields_css_props(); $fields['play_icon_color'] = array( 'color' => '%%order_class%% .et_pb_video_overlay .et_pb_video_play' ); 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() ) { $post_id = isset( $current_page['id'] ) ? $current_page['id'] : self::get_current_post_id(); $defaults = array( 'image_src' => '', ); $args = wp_parse_args( $args, $defaults ); if ( isset( $args['image_src'] ) ) { $dynamic_value = et_builder_parse_dynamic_content( stripslashes( $args['image_src'] ) ); if ( $dynamic_value->is_dynamic() && current_user_can( 'edit_post', $post_id ) ) { $args['image_src'] = $dynamic_value->resolve( $post_id ); } } $image_output = ''; if ( '' !== $args['image_src'] ) { $image_output = et_pb_set_video_oembed_thumbnail_resolution( $args['image_src'], 'high' ); } return $image_output; } function render( $attrs, $content = null, $render_slug ) { $src = $this->props['src']; $src_webm = $this->props['src_webm']; $image_src = $this->props['image_src']; $play_icon_color = $this->props['play_icon_color']; $play_icon_color_hover = $this->get_hover_value( '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, ) ); $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); if ( '' !== $play_icon_color ) { ET_Builder_Element::set_style( $render_slug, array( 'selector' => '%%order_class%% .et_pb_video_overlay .et_pb_video_play', 'declaration' => sprintf( 'color: %1$s;', esc_html( $play_icon_color ) ), ) ); } if ( et_builder_is_hover_enabled( 'play_icon_color', $this->props ) ) { ET_Builder_Element::set_style( $render_slug, array( 'selector' => '%%order_class%% .et_pb_video_overlay .et_pb_video_play:hover', 'declaration' => sprintf( 'color: %1$s;', esc_html( $play_icon_color_hover ) ), ) ); } $output = sprintf( '