vuejs3 youtube-plugin YT is not defined console error-CodePudding

When I detect a specific width via class binding to make a mobile responsive web and swap between templates using display:none, the console keeps giving me an error.
I'm having trouble using 2 YouTube templates. If you use only one YouTube, the error disappears.

Error type: ReferenceError: YT is not defined. YouTube.vue?6574:118:25

If replacing the class binding template I used is a problem, is there another way?

<template>
  <div >
    <div
      
      :>
      <h3 >
        desktop video
      </h3>
    <!-- add -->
    <component 
       is="script" 
       id="youtube-iframe-js-api-script"
       src="https://www.youtube.com/iframe_api"
       />
      <YouTube
        src="https://youtu.be/GQmO52f26Ws"
        width="540" 
        height="360" />
    </div>
    <div
      
      :>
      <h3 >
        mobile video
      </h3>
      <YouTube
        src="https://youtu.be/GQmO52f26Ws"
        width="280" 
        height="300" 
         />
    </div>
  </div>
</template>

<script setup>
import YouTube from 'vue3-youtube'
import { ref } from 'vue'

const WidthActive = ref(true)
const WidthPostion  = ref(0)
//mobile
const WidthmobileActive = ref(false)
const WidthmobilePostion  = ref(0)

window.addEventListener('resize', () => {
  WidthmobileActive.value = WidthmobilePostion.value > 590
  WidthmobilePostion.value = window.innerWidth
})
 window.addEventListener('resize', () => {
    WidthActive.value = WidthPostion.value < 591
    WidthPostion.value = window.innerWidth
})
</script>

<style>
.youtube_container{
  display: grid;
}
.youtube_container.on{
  display: none;
}
.youtube_container_mobile{
  display: grid;
}
.youtube_container_mobile.on{
  display: none;
}
</style>

CodePudding user response：

Update

Reversing ref(false) and ref(true) solved the issue.

This is a known issue apparently, maybe give a try to that one

<component 
  is="script" 
  id="youtube-iframe-js-api-script"
  src="https://www.youtube.com/iframe_api"
/>

Above your <YouTube> component.

Or maybe try to give it 2 differents refs aka ref="youtube" and ref="youtube2", not sure.

Otherwise, add the following to an apex file

<script id="youtube-iframe-js-api-script" src="https://www.youtube.com/iframe_api"></script>