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' ), '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', ], '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', ], ] ); $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', ], ] ); $this->add_control( 'insert_url', [ 'label' => esc_html__( 'External URL', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'hosted_url', [ 'label' => esc_html__( 'Choose File', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::MEDIA_CATEGORY, ], ], 'media_type' => 'video', 'condition' => [ 'video_type' => 'hosted', '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, ], ], 'media_type' => 'video', 'placeholder' => esc_html__( 'Enter your URL', 'elementor' ), 'condition' => [ 'video_type' => 'hosted', '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, ] ); $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' ), 'type' => Controls_Manager::SWITCHER, 'frontend_available' => true, 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'show_image_overlay', 'value' => '', ], [ 'name' => 'image_overlay[url]', 'value' => '', ], ], ], ] ); $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 won\'t store information about visitors on your website unless they play the video.', 'elementor' ), 'condition' => [ 'video_type' => 'youtube', ], '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( 'poster', [ 'label' => esc_html__( 'Poster', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, ], 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'view', [ 'label' => esc_html__( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'youtube', ] ); $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', 'separator' => 'none', 'condition' => [ 'show_image_overlay' => 'yes', ], ] ); $this->add_control( 'show_play_icon', [ 'label' => esc_html__( 'Play Icon', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', ], ] ); $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', ], 'default' => '169', 'prefix_class' => 'elementor-aspect-ratio-', 'frontend_available' => true, ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters', 'selector' => '{{WRAPPER}} .elementor-wrapper', ] ); $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', ], 'separator' => 'before', ] ); $this->add_control( 'play_icon_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-custom-embed-play i' => 'color: {{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, 'range' => [ 'px' => [ 'min' => 10, 'max' => 300, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-custom-embed-play i' => 'font-size: {{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' => _x( 'Shadow', 'Text Shadow Control', 'elementor' ), ], ], 'condition' => [ 'show_image_overlay' => 'yes', 'show_play_icon' => 'yes', ], ] ); $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}}', ], ] ); $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}}', ], 'separator' => 'after', ] ); $this->add_control( 'lightbox_video_width', [ 'label' => esc_html__( 'Content Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', ], 'range' => [ '%' => [ 'min' => 30, ], ], 'selectors' => [ '(desktop+)#elementor-lightbox-{{ID}} .elementor-video-container' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $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', ], ] ); $this->add_responsive_control( 'lightbox_content_animation', [ 'label' => esc_html__( 'Entrance Animation', 'elementor' ), 'type' => Controls_Manager::ANIMATION, 'frontend_available' => true, ] ); $this->end_controls_section(); } /** * 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 { $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' ); if ( ! $settings['lightbox'] ) { $this->add_render_attribute( 'video-wrapper', 'class', 'elementor-fit-aspect-ratio' ); } $this->add_render_attribute( 'video-wrapper', 'class', 'elementor-open-' . ( $settings['lightbox'] ? 'lightbox' : 'inline' ) ); ?>