Hello all, I am trying to make a video in Qualtrics that is pinned to the top of the page (so that respondents don’t have to scroll down to view it) and that can be responded to with the keyboard (e.g., pressing “J” to answer a question about the video). While that code has successfully worked, I have run into a different problem; when the page with the video loads, it sort of glitches for a second as it reconfigures to fit the video size, like so (at the 2 and 7-second marks):

The problem might be browser-specific (it is very bad on Chrome, less noticeable on Safari, for instance). Below is the JavaScript and HTML code for the first video in the example attached. Any ideas of what is going wrong and how I can fix it? I need the loading to be normal and smooth. Thanks in advance for the help!:

<video autoplay="" class="qmedia" height="400" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/quicktime" width="800" /></video>

Qualtrics.SurveyEngine.addOnload(function() {
    var base_element = document.querySelector(".SkinInner");
    base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

    var new_element = document.querySelector("#sticky_vid");
    new_element.innerHTML = '<video autoplay class="qmedia" height="400" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/quicktime" width="800" /></video>';

    base_element.style.zIndex = 1;
    new_element.style.zIndex = 10;

    this.hideNextButton();
    this.hidePreviousButton();

    var that = this;
    document.addEventListener('keydown', function keydownCallback(e) {
        var choiceID = null;
        switch (e.keyCode) {
            case 74: // 'J' was pressed
                choiceID = 1;
                break;
            case 75: // 'K' was pressed
                choiceID = 2;
                break;
        }
        if (choiceID) {
            document.removeEventListener('keydown', keydownCallback);
            that.setChoiceValue(choiceID, true);
            that.clickNextButton();
        }
    });
});