start_controls_section( 'section_video', [ 'label' => __( 'Video', 'elementor' ), ] ); $this->add_control( 'video_type', [ 'label' => __( 'Video Type', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'youtube', 'options' => [ 'youtube' => __( 'YouTube', 'elementor' ), 'vimeo' => __( 'Vimeo', 'elementor' ), ], ] ); $this->add_control( 'link', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'placeholder' => __( 'Enter your YouTube link', 'elementor' ), 'default' => 'https://www.youtube.com/watch?v=9uOETcuFjbE', 'label_block' => true, 'condition' => [ 'video_type' => 'youtube', ], ] ); $this->add_control( 'vimeo_link', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'placeholder' => __( 'Enter your Vimeo link', 'elementor' ), 'default' => 'https://vimeo.com/235215203', 'label_block' => true, 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'hosted_link', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::TEXT, 'placeholder' => __( 'Enter your video link', 'elementor' ), 'default' => '', 'label_block' => true, 'condition' => [ 'video_type' => 'hosted', ], ] ); $this->add_control( 'heading_youtube', [ 'label' => __( 'Video Options', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); // YouTube. $this->add_control( 'yt_autoplay', [ 'label' => __( 'Autoplay', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => 'youtube', ], ] ); $this->add_control( 'yt_rel', [ 'label' => __( 'Suggested Videos', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'condition' => [ 'video_type' => 'youtube', ], ] ); $this->add_control( 'yt_controls', [ 'label' => __( 'Player Control', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'youtube', ], ] ); $this->add_control( 'yt_showinfo', [ 'label' => __( 'Player Title & Actions', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => __( 'Hide', 'elementor' ), 'label_on' => __( 'Show', 'elementor' ), 'default' => 'yes', 'condition' => [ 'video_type' => 'youtube', ], ] ); $this->add_control( 'yt_mute', [ 'label' => __( 'Mute', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => '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', ], ] ); // Vimeo. $this->add_control( 'vimeo_autoplay', [ 'label' => __( 'Autoplay', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => 'vimeo', ], ] ); $this->add_control( 'vimeo_loop', [ 'label' => __( 'Loop', 'elementor' ), 'type' => Controls_Manager::SWITCHER, 'condition' => [ 'video_type' => '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( 'vimeo_color', [ 'label' => __( 'Controls Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'video_type' => 'vimeo', ], ] ); $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' => __( 'Image', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], 'condition' => [ 'show_image_overlay' => 'yes', ], ] ); $this->add_control( 'show_play_icon', [ 'label' => __( 'Play Icon', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => [ 'yes' => __( 'Yes', 'elementor' ), 'no' => __( 'No', 'elementor' ), ], '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', '43' => '4:3', '32' => '3:2', ], 'default' => '169', 'prefix_class' => 'elementor-aspect-ratio-', 'frontend_available' => true, ] ); $this->add_control( 'play_icon_title', [ 'label' => __( 'Play Icon', 'elementor' ), 'type' => Controls_Manager::HEADING, 'condition' => [ 'show_image_overlay' => 'yes', ], ] ); $this->add_control( 'play_icon_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-custom-embed-play i' => 'color: {{VALUE}}', ], 'separator' => 'before', 'condition' => [ 'show_image_overlay' => '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', ], ] ); $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', ], ] ); $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, 'units' => [ '%' ], 'default' => [ 'unit' => '%', ], 'range' => [ '%' => [ 'min' => 50, ], ], '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_control( 'lightbox_content_animation', [ 'label' => __( 'Entrance Animation', 'elementor' ), 'type' => Controls_Manager::ANIMATION, 'default' => '', 'frontend_available' => true, 'label_block' => 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_active_settings(); $video_link = 'youtube' === $settings['video_type'] ? $settings['link'] : $settings['vimeo_link']; if ( empty( $video_link ) ) { return; } $embed_params = $this->get_embed_params(); $embed_options = [ 'privacy' => $settings['yt_privacy'], ]; $video_html = Embed::get_embed_html( $video_link, $embed_params, $embed_options ); if ( empty( $video_html ) ) { echo esc_url( $video_link ); 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' ) ); ?>