Elementor Video Widget - Custom Video Aspect Ratio for Hello Elementor Theme

custom-video-aspect-ratio.php

// Add to your child theme's functions.php or via Code Snippets plugin
add_action('elementor/element/video/section_video_style/before_section_end', function ($element, $args) {

    $element->remove_control( 'aspect_ratio' );

    $element->start_injection( [
        'at' => 'after',
        'of' => 'section_video_style',
    ] );

    $element->add_responsive_control(
        'aspect_ratio',
        [
            'label' => esc_html__( 'Aspect Ratio', 'hello-elementor' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                '1 / 1' => esc_html__( '1 / 1', 'hello-elementor' ),
                '4 / 3' => esc_html__( '4 / 3', 'hello-elementor' ),
                '3 / 4' => esc_html__( '3 / 4', 'hello-elementor' ),
                '16 / 9' => esc_html__( '16 / 9', 'hello-elementor' ),
                '16 / 10' => esc_html__( '16 / 10', 'hello-elementor' ),
                '21 / 9' => esc_html__( '21 / 9', 'hello-elementor' ),
                '' => esc_html__( 'Custom', 'hello-elementor' ),
            ],
            'default' => '16 / 9',
            'selectors' => [
                '{{WRAPPER}} .elementor-wrapper' => '--video-aspect-ratio: {{VALUE}}',
            ],
        ]
    );

    $element->add_responsive_control(
        'aspect_ratio_width',
        [
            'label' => esc_html__( 'Width', 'hello-elementor' ),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'min' => 1,
            'max' => 3000,
            'step' => 1,
            'default' => 16,
            'condition' => [
                'aspect_ratio' => '',
            ],
        ]
    );

    $element->add_responsive_control(
        'aspect_ratio_height',
        [
            'label' => esc_html__( 'Height', 'hello-elementor' ),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'min' => 1,
            'max' => 3000,
            'step' => 1,
            'default' => 9,
            'selectors' => [
                '{{WRAPPER}} .elementor-wrapper' => 'aspect-ratio: {{aspect_ratio_width.VALUE}} / {{aspect_ratio_height.VALUE}};',
            ],
            'condition' => [
                'aspect_ratio' => '',
            ],
        ]
    );

    $element->end_injection();
}, 10, 2);