! Utils::has_pro(), 'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ), 'image_alt' => esc_attr__( 'Upgrade', 'elementor' ), 'title' => esc_html__( "Grab your visitors' attention", 'elementor' ), 'description' => esc_html__( 'Get the Video Playlist widget and grow your toolbox with Elementor Pro.', 'elementor' ), 'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-video-widget/' ), 'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ), ]; } /** * Register video widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 3.1.0 * @access protected */ protected function register_controls() { $this->start_controls_section( 'section_video', [ 'label' => esc_html__( 'Video', 'elementor' ), ] ); $this->add_control( 'video_type', [ 'label' => esc_html__( 'Source', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'youtube', 'options' => [ 'youtube' => esc_html__( 'YouTube', 'elementor' ), 'vimeo' => esc_html__( 'Vimeo', 'elementor' ), 'dailymotion' => esc_html__( 'Dailymotion', 'elementor' ), 'videopress' => esc_html__( 'VideoPress', 'elementor' ), 'hosted' => esc_html__( 'Self Hosted', 'elementor' ), ], 'frontend_available' => true, ] ); $this->add_control( 'youtube_url', [ 'label' => esc_html__( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => esc_html__( 'Enter your URL', 'elementor' ) . ' (YouTube)', 'default' => 'https://www.youtube.com/watch?v=XHOmBV4js_E', 'label_block' => true, 'condition' => [ 'video_type' => 'youtube', ], 'ai' => [ 'active' => false, ], 'frontend_available' => true, ] ); $this->add_control( 'vimeo_url', [ 'label' => esc_html__( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => esc_html__( 'Enter your URL', 'elementor' ) . ' (Vimeo)', 'default' => 'https://vimeo.com/235215203', 'label_block' => true, 'condition' => [ 'video_type' => 'vimeo', ], 'ai' => [ 'active' => false, ], ] ); $this->add_control( 'dailymotion_url', [ 'label' => esc_html__( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => esc_html__( 'Enter your URL', 'elementor' ) . ' (Dailymotion)', 'default' => 'https://www.dailymotion.com/video/x6tqhqb', 'label_block' => true, 'condition' => [ 'video_type' => 'dailymotion', ], 'ai' => [ 'active' => false, ], ] ); $this->add_control( 'insert_url', [ 'label' => esc_html__( 'External URL', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => [ 'hosted', 'videopress' ], ], ] ); $this->add_control( 'hosted_url', [ 'label' => esc_html__( 'Choose Video File', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::MEDIA_CATEGORY, ], ], 'media_types' => [ 'video', ], 'condition' => [ 'video_type' => [ 'hosted', 'videopress' ], 'insert_url' => '', ], ] ); $this->add_control( 'external_url', [ 'label' => esc_html__( 'URL', 'elementor' ), 'type' => Controls_Manager::URL, 'autocomplete' => false, 'options' => false, 'label_block' => true, 'show_label' => false, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => esc_html__( 'Enter your URL', 'elementor' ), 'condition' => [ 'video_type' => 'hosted', 'insert_url' => 'yes', ], ] ); $this->add_control( 'videopress_url', [ 'label' => esc_html__( 'URL', 'elementor' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'show_label' => false, 'default' => 'https://videopress.com/v/ZCAOzTNk', 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => esc_html__( 'VideoPress URL', 'elementor' ), 'ai' => [ 'active' => false, ], 'condition' => [ 'video_type' => 'videopress', 'insert_url' => 'yes', ], ] ); $this->add_control( 'start', [ 'label' => esc_html__( 'Start Time', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'description' => esc_html__( 'Specify a start time (in seconds)', 'elementor' ), 'frontend_available' => true, 'separator' => 'before', ] ); $this->add_control( 'end', [ 'label' => esc_html__( 'End Time', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'description' => esc_html__( 'Specify an end time (in seconds)', 'elementor' ), 'condition' => [ 'video_type' => [ 'youtube', 'hosted' ], ], 'frontend_available' => true, ] ); $this->add_control( 'video_options', [ 'label' => esc_html__( 'Video Options', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'autoplay', [ 'label' => esc_html__( 'Autoplay', 'elementor' ), 'description' => sprintf( /* translators: 1: `` opening tag, 2: `` closing tag. */ esc_html__( 'Note: Autoplay is affected by %1$s Google’s Autoplay policy %2$s on Chrome browsers.', 'elementor' ), '', '' ), 'type' => Controls_Manager::SWITCHER, 'frontend_available' => true, ] ); $this->add_control( 'play_on_mobile', [ 'label' => esc_html__( 'Play On Mobile', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'autoplay' => 'yes', ], 'frontend_available' => true, ] ); $this->add_control( 'mute', [ 'label' => esc_html__( 'Mute', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'frontend_available' => true, ] ); $this->add_control( 'loop', [ 'label' => esc_html__( 'Loop', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type!' => 'dailymotion', ], 'frontend_available' => true, ] ); $this->add_control( 'controls', [ 'label' => esc_html__( 'Player Controls', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type!' => 'vimeo', ], 'frontend_available' => true, ] ); $this->add_control( 'showinfo', [ 'label' => esc_html__( 'Video Info', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => [ 'dailymotion' ], ], ] ); $this->add_control( 'modestbranding', [ 'label' => esc_html__( 'Modest Branding', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => [ 'youtube' ], 'controls' => 'yes', ], 'frontend_available' => true, ] ); $this->add_control( 'logo', [ 'label' => esc_html__( 'Logo', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => [ 'dailymotion' ], ], ] ); // YouTube. $this->add_control( 'yt_privacy', [ 'label' => esc_html__( 'Privacy Mode', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'description' => esc_html__( 'When you turn on privacy mode, YouTube/Vimeo won\'t store information about visitors on your website unless they play the video.', 'elementor' ), 'condition' => [ 'video_type' => [ 'youtube', 'vimeo' ], ], 'frontend_available' => true, ] ); $this->add_control( 'lazy_load', [ 'label' => esc_html__( 'Lazy Load', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'video_type', 'operator' => '===', 'value' => 'youtube', ], [ 'relation' => 'and', 'terms' => [ [ 'name' => 'show_image_overlay', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'video_type', 'operator' => '!==', 'value' => 'hosted', ], ], ], ], ], 'frontend_available' => true, ] ); $this->add_control( 'rel', [ 'label' => esc_html__( 'Suggested Videos', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => esc_html__( 'Current Video Channel', 'elementor' ), 'yes' => esc_html__( 'Any Video', 'elementor' ), ], 'condition' => [ 'video_type' => 'youtube', ], ] ); // Vimeo. $this->add_control( 'vimeo_title', [ 'label' => esc_html__( 'Intro Title', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'vimeo_portrait', [ 'label' => esc_html__( 'Intro Portrait', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'vimeo_byline', [ 'label' => esc_html__( 'Intro Byline', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'color', [ 'label' => esc_html__( 'Controls Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'video_type' => [ 'vimeo', 'dailymotion' ], ], ] ); $this->add_control( 'download_button', [ 'label' => esc_html__( 'Download Button', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'preload', [ 'label' => esc_html__( 'Preload', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'metadata' => esc_html__( 'Metadata', 'elementor' ), 'auto' => esc_html__( 'Auto', 'elementor' ), 'none' => esc_html__( 'None', 'elementor' ), ], 'description' => sprintf( '%1$s %2$s', esc_html__( 'Preload attribute lets you specify how the video should be loaded when the page loads.', 'elementor' ), esc_html__( 'Learn more', 'elementor' ), ), 'default' => 'metadata', 'condition' => [ 'video_type' => 'hosted', 'autoplay' => '', ], ] ); $this->add_control( 'poster', [ 'label' => esc_html__( 'Poster', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_image_overlay', [ 'label' => esc_html__( 'Image Overlay', 'elementor' ), ] ); $this->add_control( 'show_image_overlay', [ 'label' => esc_html__( 'Image Overlay', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'frontend_available' => true, ] ); $this->add_control( 'image_overlay', [ 'label' => esc_html__( 'Choose Image', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], 'dynamic' => [ 'active' => true, ], 'condition' => [ 'show_image_overlay' => 'yes', ], 'frontend_available' => true, ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'image_overlay', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `image_overlay_size` and `image_overlay_custom_dimension`. 'default' => 'full', 'condition' => [ 'show_image_overlay' => 'yes', ], ] ); $this->add_control( 'show_play_icon', [ 'label' => esc_html__( 'Play Icon', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'label_off' => esc_html__( 'Hide', 'elementor' ), 'label_on' => esc_html__( 'Show', 'elementor' ), 'separator' => 'before', 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', ], ] ); $this->add_control( 'play_icon', [ 'label' => esc_html__( 'Icon', 'elementor' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'skin' => 'inline', 'label_block' => false, 'skin_settings' => [ 'inline' => [ 'none' => [ 'label' => 'Default', 'icon' => 'eicon-play', ], 'icon' => [ 'icon' => 'eicon-star', ], ], ], 'recommended' => [ 'fa-regular' => [ 'play-circle', ], 'fa-solid' => [ 'play', 'play-circle', ], ], 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon!' => '', ], ] ); $this->add_control( 'lightbox', [ 'label' => esc_html__( 'Lightbox', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'frontend_available' => true, 'label_off' => esc_html__( 'Off', 'elementor' ), 'label_on' => esc_html__( 'On', 'elementor' ), 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_video_style', [ 'label' => esc_html__( 'Video', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'aspect_ratio', [ 'label' => esc_html__( 'Aspect Ratio', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '169' => '16:9', '219' => '21:9', '43' => '4:3', '32' => '3:2', '11' => '1:1', '916' => '9:16', ], 'selectors_dictionary' => [ '169' => '1.77777', // 16 / 9 '219' => '2.33333', // 21 / 9 '43' => '1.33333', // 4 / 3 '32' => '1.5', // 3 / 2 '11' => '1', // 1 / 1 '916' => '0.5625', // 9 / 16 ], 'default' => '169', 'selectors' => [ '{{WRAPPER}} .elementor-wrapper' => '--video-aspect-ratio: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters', 'selector' => '{{WRAPPER}} .elementor-wrapper', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_image_overlay_style', [ 'label' => esc_html__( 'Image Overlay', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon' => 'yes', ], ] ); $this->add_control( 'play_icon_title', [ 'label' => esc_html__( 'Play Icon', 'elementor' ), 'type' => Controls_Manager::HEADING, 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon' => 'yes', ], ] ); $this->add_control( 'play_icon_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-custom-embed-play i' => 'color: {{VALUE}}', '{{WRAPPER}} .elementor-custom-embed-play svg' => 'fill: {{VALUE}}', ], 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon' => 'yes', ], ] ); $this->add_responsive_control( 'play_icon_size', [ 'label' => esc_html__( 'Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 300, ], ], 'selectors' => [ // Not using a CSS vars because the default size value is coming from a global scss file. '{{WRAPPER}} .elementor-custom-embed-play i' => 'font-size: {{SIZE}}{{UNIT}}', '{{WRAPPER}} .elementor-custom-embed-play svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon' => 'yes', ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'play_icon_text_shadow', 'selector' => '{{WRAPPER}} .elementor-custom-embed-play i', 'fields_options' => [ 'text_shadow_type' => [ 'label' => esc_html__( 'Shadow', 'elementor' ), ], ], 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon' => 'yes', 'play_icon[library]!' => 'svg', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_lightbox_style', [ 'label' => esc_html__( 'Lightbox', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', 'lightbox' => 'yes', ], ] ); $this->add_control( 'lightbox_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '#elementor-lightbox-{{ID}}' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'lightbox_ui_color', [ 'label' => esc_html__( 'UI Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '#elementor-lightbox-{{ID}} .dialog-lightbox-close-button' => 'color: {{VALUE}}', '#elementor-lightbox-{{ID}} .dialog-lightbox-close-button svg' => 'fill: {{VALUE}}', ], ] ); $this->add_control( 'lightbox_ui_color_hover', [ 'label' => esc_html__( 'UI Hover Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '#elementor-lightbox-{{ID}} .dialog-lightbox-close-button:hover' => 'color: {{VALUE}}', '#elementor-lightbox-{{ID}} .dialog-lightbox-close-button:hover svg' => 'fill: {{VALUE}}', ], ] ); $this->add_responsive_control( 'lightbox_content_animation', [ 'label' => esc_html__( 'Entrance Animation', 'elementor' ), 'type' => Controls_Manager::ANIMATION, 'frontend_available' => true, 'separator' => 'before', ] ); $this->add_control( 'deprecation_warning', [ 'type' => Controls_Manager::ALERT, 'alert_type' => 'danger', 'content' => esc_html__( 'Note: These controls have been deprecated and are only visible if they were previously in use. The video’s width and position are now set based on its aspect ratio.', 'elementor' ), 'separator' => 'before', 'condition' => [ 'lightbox_video_width!' => '', 'lightbox_content_position!' => '', ], ] ); // Deprecated control. Visible only if it was previously in use. $this->add_control( 'lightbox_video_width', [ 'label' => esc_html__( 'Content Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'default' => [ 'unit' => '%', ], // 'selectors' => [ // '(desktop+)#elementor-lightbox-{{ID}} .elementor-video-container' => 'width: {{SIZE}}{{UNIT}};', // ], 'condition' => [ 'lightbox_video_width!' => '', 'lightbox_content_position!' => '', ], ] ); // Deprecated control. Visible only if it was previously in use. $this->add_control( 'lightbox_content_position', [ 'label' => esc_html__( 'Content Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'frontend_available' => true, 'options' => [ '' => esc_html__( 'Center', 'elementor' ), 'top' => esc_html__( 'Top', 'elementor' ), ], // 'selectors' => [ // '#elementor-lightbox-{{ID}} .elementor-video-container' => '{{VALUE}}; transform: translateX(-50%);', // ], 'selectors_dictionary' => [ 'top' => 'top: 60px', ], 'condition' => [ 'lightbox_video_width!' => '', 'lightbox_content_position!' => '', ], ] ); $this->end_controls_section(); } public function print_a11y_text( $image_overlay ) { if ( empty( $image_overlay['alt'] ) ) { echo esc_html__( 'Play Video', 'elementor' ); } else { echo esc_html__( 'Play Video about', 'elementor' ) . ' ' . esc_attr( $image_overlay['alt'] ); } } /** * Render video widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); $video_url = $settings[ $settings['video_type'] . '_url' ]; if ( 'hosted' === $settings['video_type'] ) { $video_url = $this->get_hosted_video_url(); } else { if ( 'videopress' === $settings['video_type'] ) { $video_url = $this->get_videopress_video_url(); } $embed_params = $this->get_embed_params(); $embed_options = $this->get_embed_options(); } if ( empty( $video_url ) ) { return; } if ( 'youtube' === $settings['video_type'] ) { $video_html = '
'; } if ( 'hosted' === $settings['video_type'] ) { $this->add_render_attribute( 'video-wrapper', 'class', 'e-hosted-video' ); ob_start(); $this->render_hosted_video(); $video_html = ob_get_clean(); } else { $is_static_render_mode = Plugin::$instance->frontend->is_static_render_mode(); $post_id = get_queried_object_id(); if ( $is_static_render_mode ) { $video_html = Embed::get_embed_thumbnail_html( $video_url, $post_id ); // YouTube API requires a different markup which was set above. } else if ( 'youtube' !== $settings['video_type'] ) { $video_html = Embed::get_embed_html( $video_url, $embed_params, $embed_options ); } } if ( empty( $video_html ) ) { echo esc_url( $video_url ); return; } $this->add_render_attribute( 'video-wrapper', 'class', 'elementor-wrapper' ); $this->add_render_attribute( 'video-wrapper', 'class', 'elementor-open-' . ( $settings['lightbox'] ? 'lightbox' : 'inline' ) ); ?>