Video size resets momentarily when changing src

When I change the src of a video, it momentarily shrinks to its default size and scrolls the screen up, but once it loads, the screen doesn’t go back down. How can I prevent the resetting of the video, and make it so it does not scroll up? Here’s the code:

      <div class="leftArrow">
        <a aria-label="Previous Video" class="lArrow" onclick=lastVideo()><img src="source/leftArrow.png" class="arrow"></a>
      </div>
      <div class="video" >
        <video src="video.mp4" id="video" controls autoplay>Video not supported</video>
      </div>
      <div class="rightArrow">
        <a aria-label="Next Video" class="rArrow" onclick=nextVideo()><img src="source/rightArrow.png" class="arrow"></a>
      </div>
    </div>

    var title = document.getElementById("title");
    title.innerHTML = titleList[currentVideo];

    var desc = document.getElementById("desc");
    desc.innerHTML = descList[currentVideo];

    var video = document.getElementById("video");
    video.src = aList[currentVideo]; 
    
    video.load();
    video.play();
    return;
}

function nextVideo() {
    if (currentVideo == aList.length - 1) {
        currentVideo = -1;
    }
    currentVideo++;
    loadVideo();
}

function lastVideo() {
    if (currentVideo == 0) {
        currentVideo = aList.length;
    }
    currentVideo--;
    loadVideo();
}