vuejs3 youtube-plugin YT is not defined console error

Question

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 class="container">
    <div
      class="youtube_container"
      :class="{'youtube_container on' : WidthActive}">
      <h3 class="youtube_title">
        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
      class="youtube_container_mobile"
      :class="{'youtube_container_mobile on' : WidthmobileActive}">
      <h3 class="youtube_title">
        mobile video
      </h3>
      <YouTube
        src="https://youtu.be/GQmO52f26Ws"
        width="280" 
        height="300" 
        class="youtube_padding" />
    </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>

What is the line where you get that error? There is no `YT` in your code. — kissu, Dec 22 '22 at 08:01
You could bind props and make them change depending on screen size. I see that the only differences are classes, width and height. Then you would only use one Youtube component. — Nikola Gava, Dec 22 '22 at 08:17
The first part of my answer is still the main one to try tbh. The 2nd one (with the refs) was more of a longshot. — kissu, Dec 22 '22 at 08:46
I didn't quite understand the first method. Are you saying to add that code directly above the template? An error occurred when adding. — bxeom, Dec 22 '22 at 09:57
ReferenceError: YT is not defined at Proxy.initPlayer (YouTube.vue?6574:118:25) same error — bxeom, Dec 22 '22 at 10:00

kissu · Accepted Answer · 2022-12-22T10:24:06.980

2

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>

edited Dec 22 '22 at 10:24

answered Dec 22 '22 at 08:15

kissu

40,416
14
65
133

It's pretty unreadable in the comment section. Please update your question with a proper indentation + highlight (as I did for your question). @bxeom – kissu Dec 22 '22 at 08:42
I edited and uploaded it. It seems that my method is wrong. I'm not sure where it went wrong. :( – bxeom Dec 22 '22 at 08:46
The problem is gone, but when the loading youtube brings up the second youtube and touches the width, it returns to normal.. – bxeom Dec 22 '22 at 10:13
@bxeom mainly comes from the fact of how you mount it to your DOM and the lifecycle of the component. [Try this](https://stackoverflow.com/a/55328457/8816585) before resizing the whole thing. – kissu Dec 22 '22 at 10:18
Reversing ref(false) and ref(true) solved all the problems. thank you! – bxeom Dec 22 '22 at 10:22
@bxeom your issue is solved? I've updated my answer. – kissu Dec 22 '22 at 10:24
1

yes i found the problem and solved it – bxeom Dec 22 '22 at 10:26

vuejs3 youtube-plugin YT is not defined console error

1 Answers1

Update