title: Passing Video File Input to p5js Canvas
body: <p>I am trying to use Bootstrap to create a prettier interface to upload a video file rather than the p5js "createFileInput()" function. I want the video in p5js so I can overlay animations onto it. For some reason my code is displaying the video twice as soon as I use the function "createVideo" and if I try and hide the DOM that is the second video outside of the canvas it disappears from the p5js canvas. Here is my code: </p>
  
  <pre><code>var view = {
      vid: "",   
      cHeight: 500, 
      cWidth: 700, 
      xVid: 0, 
      yVid: 0, 
  };
  
  function setup() {
      let cnv = createCanvas(view.cWidth, view.cHeight);
      cnv.id("p5jsCanvas"); 
  }
  
  function draw() {
      if (view.vid) {
          // We have an uploaded video so draw it
          //background(0);
          console.log(view.vid.id()); 
          image(view.vid, view.xVid, view.yVid);
      } else {
          background(0); 
      }
  }
  
  $("#videoFileUpload").on("change", function() {
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
      if (this.files &amp;&amp; this.files[0]) {
          console.log(this.files[0]);
          var fileLocation = URL.createObjectURL(this.files[0]); 
          console.log(fileLocation);
          view.vid = createVideo([fileLocation], resizeVid);
          view.vid.id("poseVid");
      }
  
  });
  
  
  function resizeVid(){
    // If the height is greater than the width use the height to scale and AUTO for the width
    if (view.vid.height &gt; view.vid.width){
      console.log("height &gt; width");
      view.vid.size(AUTO, cHeight);
    } else { // Else if the width is greater than or equal to the height use the width to scale and AUTO for the height
      view.vid.size(view.cWidth, AUTO);
    } 
  
    // Reset location of the  video
    let currW = $("#poseVid").attr('width');
    let currH = $("#poseVid").attr('height'); 
    view.xVid = (view.cWidth - currW)/2; 
    view.yVid = (view.cHeight - currH)/2; 
  
  }
  </code></pre>