setContent not updating from image to video

[rftb]

I've got a few links on one page (single.php template in Wordpress) that, when clicked, it opens a vr image or video in a lightbox (Fancybox 3). The opening in a lightbox part is working great.

When the player inits, I'm setting the image parameter to show a black image. A user won't ever see this, I only have it there because the parameter has to be there. This is also working fine. So when you click the link, I'm using setContent() to change the image to either a video or a different image, depending on the link clicked. My issue is that I always see the black image that I initiated the player with, it doesn't ever change, and I'm not getting any errors in the console.

The only thing I noticed by using console.log is that the onVRViewReady method is being called once on page load and then again after the link is clicked and setContent() is run. In the docs it says "The types of events on() can register are: ready: VR View loaded its initial contents and is now ready to accept commands.". So maybe because this is running multiple times it's resetting the image parameter to the black image?

Any insight or guesses to a solution would be so incredibly appreciated! Thanks in advance.

<div class="video-link">
    <a href="javascript:;" data-fancybox data-src="#amenity-360" data-vr="explore_<?php echo str_replace('-', '_', sanitize_title(get_the_title())); ?>">Explore every angle</a>
</div>

var vrView;

var scenes = {
    explore_<?php echo str_replace('-', '_', sanitize_title(get_the_title())); ?>: {
        <?php if( get_field('360_view') === 'image' ) : ?>
        image: '<?php echo get_field('360_view_image'); ?>'
        <?php elseif( get_field('360_view') === 'video' ) : ?>
        video: '<?php echo get_field('360_view_video'); ?>'
        <?php endif; ?>
    }
}

function onLoad() {
    vrView = new VRView.Player('#vrview', {
        image: '<?php echo get_bloginfo('template_url'); ?>/assets/images/vr-blank.png',
        is_autopan_off: true
    });

    console.log('onload');

    vrView.on('ready', onVRViewReady);
    vrView.on('modechange', onModeChange);
    vrView.on('error', onVRViewError);
}

function onVRViewReady(e) {
    console.log('onVRViewReady');
}

function onModeChange(e) {
    console.log('onModeChange', e.mode);
}

function onVRViewError(e) {
    console.log('Error! %s', e.message);
}

function loadScene(id) {
    console.log('loadScene', id + ', ' + scenes[id].video);

    // Set the image or video
    vrView.setContent({
        <?php if( get_field('360_view') === 'image' ) : ?>
        image: scenes[id].image,
        <?php elseif( get_field('360_view') === 'video' ) : ?>
        video: scenes[id].video,
        <?php endif; ?>
        is_autopan_off: true
    });
}

jQuery('.video-link a').click(function() {
    loadScene('explore_<?php echo str_replace('-', '_', sanitize_title(get_the_title())); ?>');
});

window.addEventListener('load', onLoad);