Dynamically change PlayerVars

[fusigabs]

I am trying to dynamically change playerVars, but changes are not reflected in the player. Here's my component:

<template>
    <div class="size-full aspect-square" ref="youtubeRef"/>
</template>
<script setup lang='ts'>
const { element } = defineProps<{
    element: TElement;
}>();

const videoId = computed(() => element.getProp('videoId'));
const youtubeRef = ref();

const playerOptions = computed<PlayerVars>(() => {
    return {
        mute: element.getProp('mute') ? 1 : 0,
        autoplay: element.getProp('autoplay') ? 1 : 0,
        controls: element.getProp('controls') ? 1 : 0,
        loop: element.getProp('loop') ? 1 : 0,
        modestbranding: 1,
        fs: element.getProp('fullscreen') ? 1 : 0, 
        rel: element.getProp('relatedVideos') ? 1 : 0 
    }
})

const { onReady, instance } = usePlayer(videoId, youtubeRef, {
    cookie: false,
    width: '100%',
    height: '100%',
    playerVars: playerOptions, // NB when i pass playerOptions.value, the settings are applied but reactivity is lost. When I use playerOptions, the settings are not applied at all.
});
</script>

A new video is played whenever videoId changes, but a change to playerOptions does not get applied in playerVars.

[Techassi]

Sorry for the late response.

This is correct. Currently, the player options (and therefore the player params) are not using a Ref. This might be possible, however one issue I could see is applying these new options to the actual player instance. I will have to consult the player API to see if these options can be updated in place without the need to mount a new player.