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' ) ); ?>
get_render_attribute_string( 'video-wrapper' ); ?>> has_image_overlay() ) { $this->add_render_attribute( 'image-overlay', 'class', 'elementor-custom-embed-image-overlay' ); if ( $settings['lightbox'] ) { $lightbox_options = [ 'type' => 'video', 'url' => Embed::get_embed_url( $video_link, $embed_params, $embed_options ), 'modalOptions' => [ 'id' => 'elementor-lightbox-' . $this->get_id(), 'entranceAnimation' => $settings['lightbox_content_animation'], 'videoAspectRatio' => $settings['aspect_ratio'], ], ]; $this->add_render_attribute( 'image-overlay', [ 'class' => 'elementor-clickable', 'data-elementor-open-lightbox' => 'yes', 'data-elementor-lightbox' => wp_json_encode( $lightbox_options ), ] ); } else { $this->add_render_attribute( 'image-overlay', 'style', 'background-image: url(' . $settings['image_overlay']['url'] . ');' ); } ?>
get_render_attribute_string( 'image-overlay' ); ?>>
get_active_settings(); $url = 'youtube' === $settings['video_type'] ? $settings['link'] : $settings['vimeo_link']; echo esc_url( $url ); } /** * Retrieve video widget embed parameters. * * @since 1.5.0 * @access public * * @return array Video embed parameters. */ public function get_embed_params() { $settings = $this->get_settings(); $params = []; if ( 'youtube' === $settings['video_type'] ) { $youtube_options = [ 'autoplay', 'rel', 'controls', 'showinfo', 'mute' ]; foreach ( $youtube_options as $option ) { if ( 'autoplay' === $option && $this->has_image_overlay() ) { continue; } $value = ( 'yes' === $settings[ 'yt_' . $option ] ) ? '1' : '0'; $params[ $option ] = $value; } $params['wmode'] = 'opaque'; } if ( 'vimeo' === $settings['video_type'] ) { $vimeo_options = [ 'autoplay', 'loop', 'title', 'portrait', 'byline' ]; foreach ( $vimeo_options as $option ) { if ( 'autoplay' === $option && $this->has_image_overlay() ) { continue; } $value = ( 'yes' === $settings[ 'vimeo_' . $option ] ) ? '1' : '0'; $params[ $option ] = $value; } $params['color'] = str_replace( '#', '', $settings['vimeo_color'] ); } return $params; } /** * Retrieve video widget hosted parameters. * * @since 1.0.0 * @access protected * * @return array Video hosted parameters. */ protected function get_hosted_params() { $settings = $this->get_settings(); $params = []; $params['src'] = $settings['hosted_link']; $hosted_options = [ 'autoplay', 'loop' ]; foreach ( $hosted_options as $key => $option ) { $value = ( 'yes' === $settings[ 'hosted_' . $option ] ) ? '1' : '0'; $params[ $option ] = $value; } if ( ! empty( $settings['hosted_width'] ) ) { $params['width'] = $settings['hosted_width']; } if ( ! empty( $settings['hosted_height'] ) ) { $params['height'] = $settings['hosted_height']; } return $params; } /** * Whether the video widget has an overlay image or not. * * Used to determine whether an overlay image was set for the video. * * @since 1.0.0 * @access protected * * @return bool Whether an image overlay was set for the video. */ protected function has_image_overlay() { $settings = $this->get_settings(); return ! empty( $settings['image_overlay']['url'] ) && 'yes' === $settings['show_image_overlay']; } }