Nuxt•3mo ago

Youtube SDK

So i want to show youtube videos on a page , so im loading in the sdk with a plugin like this

// plugins/youtube.client.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      loadYouTubeAPI: () => {
        return new Promise<void>((resolve) => {
          if (!import.meta.client) return resolve(); // Ensure this runs only on the client-side

          if (window.YT && window.YT.Player) {
            resolve(); // If already loaded, resolve immediately
          } else {
            const scriptTag = document.createElement("script");
            scriptTag.src = "https://www.youtube.com/iframe_api";
            document.head.appendChild(scriptTag);

            window.onYouTubeIframeAPIReady = () => {
              resolve(); // Resolve when the API is fully loaded
            };
          }
        });
      },
    },
  };
});

// plugins/youtube.client.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      loadYouTubeAPI: () => {
        return new Promise<void>((resolve) => {
          if (!import.meta.client) return resolve(); // Ensure this runs only on the client-side

          if (window.YT && window.YT.Player) {
            resolve(); // If already loaded, resolve immediately
          } else {
            const scriptTag = document.createElement("script");
            scriptTag.src = "https://www.youtube.com/iframe_api";
            document.head.appendChild(scriptTag);

            window.onYouTubeIframeAPIReady = () => {
              resolve(); // Resolve when the API is fully loaded
            };
          }
        });
      },
    },
  };
});

and in my component i do this :

// Props to accept videoId
const props = defineProps({
  videoId: {
    type: String,
    required: true,
  },
});

// Create a ref for the YouTube player element
const playerElement = ref(null);
let playerInstance = null;

onMounted(async () => {
  const { $loadYouTubeAPI } = useNuxtApp();

  await $loadYouTubeAPI();

  // Use nextTick to ensure DOM is updated
  await nextTick();

  if (playerElement.value) {
    // Initialize YouTube Player
    playerInstance = new YT.Player(playerElement.value, {
      height: "390",
      width: "640",
      videoId: props.videoId,
      events: {
        onReady: (event) => {
          event.target.playVideo();
        },
      },
    });
  }
});

// Cleanup the player when the component is unmounted
onBeforeUnmount(() => {
  if (playerInstance) {
    playerInstance.destroy();
  }
});

// Props to accept videoId
const props = defineProps({
  videoId: {
    type: String,
    required: true,
  },
});

// Create a ref for the YouTube player element
const playerElement = ref(null);
let playerInstance = null;

onMounted(async () => {
  const { $loadYouTubeAPI } = useNuxtApp();

  await $loadYouTubeAPI();

  // Use nextTick to ensure DOM is updated
  await nextTick();

  if (playerElement.value) {
    // Initialize YouTube Player
    playerInstance = new YT.Player(playerElement.value, {
      height: "390",
      width: "640",
      videoId: props.videoId,
      events: {
        onReady: (event) => {
          event.target.playVideo();
        },
      },
    });
  }
});

// Cleanup the player when the component is unmounted
onBeforeUnmount(() => {
  if (playerInstance) {
    playerInstance.destroy();
  }
});

this works when you only have 1 video, but if you have multiple it only loads the last on , im getting confused does somebody have some help ?

16 Replies

NossieOP•3mo ago

also it does works when navigation to another page and back it shows the rest , but on initial load or refresh it dont

harlan•3mo ago

You should try Nuxt Scripts YouTube embed https://scripts.nuxt.com/scripts/content/youtube-player

Nuxt Scripts

YouTube Player · Nuxt Scripts

Show performance-optimized YouTube videos in your Nuxt app.

NossieOP•3mo ago

@harlan i already tried nuxt scripts but it is broken, when added unhead gives errors on tagElements cannot be mapped ( also nuxt scripts is in beta .. ), so not usable

harlan•3mo ago

if you submit an issue for the error i will fix it 👍 anyway you can look at how it's implemented, it doesn't have the issues you're facing

NossieOP•3mo ago

well thats the problem i couldt see it work because after the npx add module ( on fresh nuxt ) it already gives error out of the box so didnt see it working , i can however take a look at the code

harlan•3mo ago

can you replicate in the playground https://stackblitz.com/edit/nuxt-starter-pkwfkx?file=pages%2Findex.vue ?

Harlan Wilton

StackBlitz

Minimal Nuxt Scripts - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

NossieOP•3mo ago

let me check ok for some reason i got it working on a new fresh install, i will check ik out later in my current project if it will work, also @harlan are you a member of nuxt-scripts ?

harlan•3mo ago

i am the author

NossieOP•3mo ago

nice ! there is a error on the sdk example for youtube scripts let player; should be const player = ref(null); the player.playVideo wont work then this will work

const player = ref(null);

onLoaded(async ({ YT }) => {
  // we need to wait for the internal YouTube APIs to be ready
  const YouTube = await YT;
  await new Promise<void>((resolve) => {
    if (typeof YT.Player === "undefined") YouTube.ready(resolve);
    else resolve();
  });
  // load the API
  player.value = new YT.Player(video.value, {
    videoId: props.videoId,
  });
});

const player = ref(null);

onLoaded(async ({ YT }) => {
  // we need to wait for the internal YouTube APIs to be ready
  const YouTube = await YT;
  await new Promise<void>((resolve) => {
    if (typeof YT.Player === "undefined") YouTube.ready(resolve);
    else resolve();
  });
  // load the API
  player.value = new YT.Player(video.value, {
    videoId: props.videoId,
  });
});

harlan•3mo ago

thanks, i've pushed up a fix

NossieOP•3mo ago

i also going to try later this week why im getting the error with unhead after i add nuxt-scripts to my other project

harlan•3mo ago

it's likely you have an old version of one of the unhead packages you can usually fix it by doing a nuxi upgrade --force

NossieOP•3mo ago

mmm 🤔 i thought i updated latest nuxt version , but thanks for the tip ! i will post an update in this channel ! keep up the good work !! also cant wait untill its out of beta 🙂

harlan•3mo ago

it's not nuxt itself but the dependencies of nuxt which sometimes get stuck by doing --force it will delete your lock file and node_modules and re-install which usually solves it

NossieOP•3mo ago

i will give that a try after the --force upgrade everything works ! thanks @harlan

IceMeltAll•3mo ago

randomly looking for a fix on my nuxt-mongoose module and stumbled upon this legendary command. Thank you! PS: Still didn't fix my problem though 😄 and thank you for triggering that response !

Gaming

Programming

Youtube SDK