start_controls_section( 'section_video', [ 'label' => __( 'Video', 'elementor' ), ] ); $this->add_control( 'video_type', [ 'label' => __( 'Source', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'youtube', 'options' => [ 'youtube' => __( 'YouTube', 'elementor' ), 'vimeo' => __( 'Vimeo', 'elementor' ), 'dailymotion' => __( 'Dailymotion', 'elementor' ), 'hosted' => __( 'Self Hosted', 'elementor' ), ], ] ); $this->add_control( 'youtube_url', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => __( 'Enter your URL', 'elementor' ) . ' (YouTube)', 'default' => 'https://www.youtube.com/watch?v=XHOmBV4js_E', 'label_block' => true, 'condition' => [ 'video_type' => 'youtube', ], ] ); $this->add_control( 'vimeo_url', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => __( 'Enter your URL', 'elementor' ) . ' (Vimeo)', 'default' => 'https://vimeo.com/235215203', 'label_block' => true, 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'dailymotion_url', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, 'categories' => [ TagsModule::POST_META_CATEGORY, TagsModule::URL_CATEGORY, ], ], 'placeholder' => __( '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' => __( 'External URL', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'hosted_url', [ 'label' => __( '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' => __( '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' => __( 'Enter your URL', 'elementor' ), 'condition' => [ 'video_type' => 'hosted', 'insert_url' => 'yes', ], ] ); $this->add_control( 'start', [ 'label' => __( 'Start Time', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'description' => __( 'Specify a start time (in seconds)', 'elementor' ), 'condition' => [ 'loop' => '', ], ] ); $this->add_control( 'end', [ 'label' => __( 'End Time', 'elementor' ), 'type' => Controls_Manager::NUMBER, 'description' => __( 'Specify an end time (in seconds)', 'elementor' ), 'condition' => [ 'loop' => '', 'video_type' => [ 'youtube', 'hosted' ], ], ] ); $this->add_control( 'video_options', [ 'label' => __( 'Video Options', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'autoplay', [ 'label' => __( 'Autoplay', 'elementor' ), 'type' => Controls_Manager::SWITCHER, ] ); $this->add_control( 'play_on_mobile', [ 'label' => __( 'Play On Mobile', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'autoplay' => 'yes', ], ] ); $this->add_control( 'mute', [ 'label' => __( 'Mute', 'elementor' ), 'type' => Controls_Manager::SWITCHER, ] ); $this->add_control( 'loop', [ 'label' => __( 'Loop', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type!' => 'dailymotion', ], ] ); $this->add_control( 'controls', [ 'label' => __( 'Player Controls', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type!' => 'vimeo', ], ] ); $this->add_control( 'showinfo', [ 'label' => __( 'Video Info', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => [ 'dailymotion' ], ], ] ); $this->add_control( 'modestbranding', [ 'label' => __( 'Modest Branding', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => [ 'youtube' ], 'controls' => 'yes', ], ] ); $this->add_control( 'logo', [ 'label' => __( 'Logo', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => [ 'dailymotion' ], ], ] ); // YouTube. $this->add_control( 'yt_privacy', [ 'label' => __( 'Privacy Mode', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'description' => __( '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', ], ] ); $this->add_control( 'rel', [ 'label' => __( 'Suggested Videos', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => __( 'Current Video Channel', 'elementor' ), 'yes' => __( 'Any Video', 'elementor' ), ], 'condition' => [ 'video_type' => 'youtube', ], ] ); // Vimeo. $this->add_control( 'vimeo_title', [ 'label' => __( 'Intro Title', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'vimeo_portrait', [ 'label' => __( 'Intro Portrait', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'vimeo_byline', [ 'label' => __( 'Intro Byline', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'color', [ 'label' => __( 'Controls Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'video_type' => [ 'vimeo', 'dailymotion' ], ], ] ); $this->add_control( 'download_button', [ 'label' => __( 'Download Button', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'poster', [ 'label' => __( 'Poster', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'youtube', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_image_overlay', [ 'label' => __( 'Image Overlay', 'elementor' ), ] ); $this->add_control( 'show_image_overlay', [ 'label' => __( 'Image Overlay', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), ] ); $this->add_control( 'image_overlay', [ 'label' => __( 'Choose Image', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], 'dynamic' => [ 'active' => true, ], 'condition' => [ 'show_image_overlay' => 'yes', ], ] ); $this->add_control( 'lazy_load', [ 'label' => __( 'Lazy Load', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'show_image_overlay' => 'yes', 'video_type!' => 'hosted', ], ] ); $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' => __( 'Play Icon', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', ], ] ); $this->add_control( 'lightbox', [ 'label' => __( 'Lightbox', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'frontend_available' => true, 'label_off' => __( 'Off', 'elementor' ), 'label_on' => __( 'On', 'elementor' ), 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_video_style', [ 'label' => __( 'Video', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'aspect_ratio', [ 'label' => __( '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' => __( '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' => __( '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' => __( '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' => __( 'Lightbox', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_image_overlay' => 'yes', 'image_overlay[url]!' => '', 'lightbox' => 'yes', ], ] ); $this->add_control( 'lightbox_color', [ 'label' => __( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '#elementor-lightbox-{{ID}}' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'lightbox_ui_color', [ 'label' => __( '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' => __( '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' => __( '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' => __( 'Content Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'frontend_available' => true, 'options' => [ '' => __( 'Center', 'elementor' ), 'top' => __( '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' => __( '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(); } if ( empty( $video_url ) ) { return; } if ( 'hosted' === $settings['video_type'] ) { ob_start(); $this->render_hosted_video(); $video_html = ob_get_clean(); } else { $embed_params = $this->get_embed_params(); $embed_options = $this->get_embed_options(); $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 ); } else { $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' ) ); ?>