cloneNode() makes html video lag and sometimes not render at all

Question

When I click a video, it should animate from its original position to some target position. For reasons, I can't animate the original video element, so I animate a clone which is created by cloneNode(). I just cycle through about 5 videos (which are less than 20 seconds long) and 5 images when clicking. My animation method was causing only the videos to lag and sometimes not render at all while images seemed to be unaffected. I commented out all of my animation code except for a single line:

var clone = videoElement.cloneNode( false ); 

Without the animation code, the images/videos just teleport to the target position instantly (which is expected). But leaving that single line uncommented, when I click relatively quickly, causes the videos to lag a little (if I'm lucky) and sometimes not render at all in Chrome. In Edge, the videos take a few seconds to render. Removing that line, the videos load/render just fine no matter how fast I click.

1. Why does this happen? Is cloneNode really just that slow?
2. Are there any practical solutions to this problem?

Answer 1

It seemed like the problem was with cloneNode(), but it turns out it was because I was using mp4 files as the source for my videos. mp4 is deprecated in Chrome. As soon as I converted to webm video files, the lag/rendering problem completely disappeared.