Web Pro Dragons

Internal Dev Library

Video length limit on Upload Field (Elementor Form)

Note:

- Elementor > Custom Code (script)

- Function.php (function)

Script

<script>
document.addEventListener(‘DOMContentLoaded’, function() {
    const fileInput = document.getElementById(‘form-field-hero_videoupload’);
    if (fileInput) {
        fileInput.addEventListener(‘change’, function(e) {
            const file = e.target.files[0];
            if (file && file.type.includes(‘video/’)) { // Covers all video types
                const video = document.createElement(‘video’);
                video.preload = ‘metadata’;
                video.onloadedmetadata = function() {
                    if (video.duration > 60) {
                        alert(‘Error: Video must be 1 minute or shorter.’);
                        e.target.value = ”; // Clear the file
                    }
                    URL.revokeObjectURL(video.src); // Free memory
                };
                video.onerror = function() {
                    alert(‘Error: Could not read video metadata. Try another file.’);
                    e.target.value = ”;
                };
                video.src = URL.createObjectURL(file);
            }
        });
    }
});
</script>

Function.php

//video legth limit
add_action(‘elementor_pro/forms/process’, function($record, $ajax_handler) {
$field_id = ‘hero_videoupload’; // Matches your field ID
$file_data = $_FILES[‘form_fields’];

if (!empty($file_data[‘tmp_name’][$field_id])) {
$file_path = $file_data[‘tmp_name’][$field_id];

// Check if FFmpeg exists (critical for servers)
if (shell_exec(‘which ffmpeg’)) {
$duration = shell_exec(“ffmpeg -i ” . escapeshellarg($file_path) . ” 2>&1 | grep Duration | awk ‘{print $2}’ | tr -d ,”);

if ($duration) {
list($hours, $mins, $secs) = explode(‘:’, $duration);
$total_seconds = ($hours * 3600) + ($mins * 60) + floor($secs);

if ($total_seconds > 60) {
$ajax_handler->add_error($field_id, ‘Video must be 1 minute or shorter.’);
}
}
} else {
$ajax_handler->add_error($field_id, ‘Server error: Video validation failed (FFmpeg missing).’);
}
}
}, 10, 2);

Script (use this if the form is on Popup)

<script>
function attachVideoLengthChecker(input) {
input.addEventListener(‘change’, function(e) {
const file = e.target.files[0];
if (file && file.type.includes(‘video/’)) {
const video = document.createElement(‘video’);
video.preload = ‘metadata’;
video.onloadedmetadata = function() {
if (video.duration > 60) {
alert(‘Error: Video must be 1 minute or shorter.’);
e.target.value = ”; // Clear the file
}
URL.revokeObjectURL(video.src);
};
video.onerror = function() {
alert(‘Error: Could not read video metadata. Try another file.’);
e.target.value = ”;
};
video.src = URL.createObjectURL(file);
}
});
}

document.addEventListener(‘DOMContentLoaded’, function () {
// Attach to form already on page (e.g., footer)
const initialInput = document.getElementById(‘form-field-hero_videoupload’);
if (initialInput) {
attachVideoLengthChecker(initialInput);
}

// Attach to popup form after it’s shown
jQuery(document).on(‘elementor/popup/show’, function () {
const popupInput = document.getElementById(‘form-field-hero_videoupload’);
if (popupInput) {
attachVideoLengthChecker(popupInput);
}
});
});
</script>