Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?

I was trying to crop videos with cropper.js, but from what I understand that it is impossible and only works for photos. I've looked everywhere for resources to do such, but I couldn't find anything. If you don't know what I am talking about I would like something like this https://codesandbox.io/s/react-easy-crop-for-videos-lfhme but uses JavaScript instead of React. The reason I don't want to switch to a frontend framework is because I am using Django for my backend, and am not comfortable with switching to APIs, and using React or Vue, since I am really far into my project. I also want to avoid using a hybrid architecture if possible. If anyone knows of any libraries or repositories I can check out that might help me that would be much appreciated.

Just in case I can use videos in cropper.js here is my source code.

    // file-box is the id of the div element that will store our cropping file preview
    const filebox = document.getElementById('file-box')
        // crop-btn is the id of button that will trigger the event of change original file with cropped file.
    const crop_btn = document.getElementById('crop-btn')
    // id_file is the id of the input tag where we will upload the file
    const input = document.getElementById('id_file')

    // When user uploads the file this event will get triggered
    input.addEventListener('change', ()=>{
      // Getting file file object from the input variable
      const img_data = input.files[0]
      // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
      // The new object URL represents the specified File object or Blob object.
      const url = URL.createObjectURL(img_data)

      // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
      filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
      // Storing that cropping view file in a variable
      const file = document.getElementById('file')

      // Displaying the file box
      document.getElementById('file-box').style.display = 'block'
      // Displaying the Crop buttton
      document.getElementById('crop-btn').style.display = 'block'
      // Hiding the Post button
      document.getElementById('confirm-btn').style.display = 'none'

      // Creating a croper object with the cropping view file
      // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
      // For more settings, check out their official documentation at https://github.com/fengyuanchen/cropperjs
      const cropper = new Cropper(file, {
      autoCropArea: 1,
      aspectRatio: 1/1,
      viewMode: 1,
      scalable: false,
      zoomable: false,
      movable: false,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      })

      // When crop button is clicked this event will get triggered
      crop_btn.addEventListener('click', ()=>{
        // This method coverts the selected cropped file on the cropper canvas into a blob object
        cropper.getCroppedCanvas().toBlob((blob)=>{

          // Gets the original file data
          let fileInputElement = document.getElementById('id_file');
          // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
          let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
          // Create a new container
          let container = new DataTransfer();
          // Add the cropped file file to the container
          container.items.add(file);
          // Replace the original file file with the new cropped file file
          fileInputElement.files = container.files;

          // Hide the cropper box
          document.getElementById('file-box').style.display = 'none'
          // Hide the crop button
          document.getElementById('crop-btn').style.display = 'none'
          // Display the Post button
          document.getElementById('confirm-btn').style.display = 'block'

          });
        });
    });

from Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?