SoFunction
Updated on 2025-04-12

Detailed explanation of how to use youtube-player in vue3

text

youtube-playeryesYouTube IFrame Player API(YIPA) package. You can play YouTube videos on your own website.

Get started

usenpmdownload

npm i youtube-player

Make it into component youtubePlayer

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import YouTubePlayer from "youtube-player";
const props = defineProps({
  id: { type: String, default: "" },
  src: { type: String, required: true },
  width: { type: Number, default: 0 },
  height: { type: Number, default: 0 }
});
const emit = defineEmits(["ended", "play", "pause"]);
onMounted(() => {
  initPlayer();
  loadPlayer();
});
onBeforeUnmount(() => {
  player && ();
});
const getVideoId = () => {
  try {
    const url = new URL();
    return ("v") || "";
  } catch (error) {
    return "";
  }
};
let player = null;
const initPlayer = () => {
  try {
    player = YouTubePlayer(`youtube-${}`, {
      host: "",
      width: ,
      height: ,
      videoId: getVideoId(),
      playsinline: 1,
      rel: 0
    });
  } catch (error) {
    (error);
  }
};
const loadPlayer = () => {
  try {
    (getVideoId());
  } catch (error) {
    (error);
  }
};
const play = () => player && ();
const pause = () => player && ();
// -1 (not started) 0 (end) 1 (playing) 2 (pausing) 3 (buffering) 5 (video inserted)let stateChangeListener;
const addStateChange = () => {
  stateChangeListener = player?.on("stateChange", (event) => {
    if ( === 0) emit("ended");
    if ( === 1) emit("play");
    if ( === 2) emit("pause");
  });
};
const removeStateChange = () => {
  if (stateChangeListener) player?.off(stateChangeListener);
};
watch(
  () => ,
  () => loadPlayer()
);
defineExpose({ play, pause });
</script>
<template>
  <div class="youtube-video">
    <div :></div>
  </div>
</template>
<style lang="scss" scoped>
.youtube-video {
  width: 100%;
  overflow: hidden;
}
</style>

How to use

<youtube-player src="/watch?v=uRzs2kS3Blg"></youtube-player>

Things to note

The player has a default width and height, which can only be px. If you need to be responsive, you must dynamically obtain the width and height by yourself and reset it.

Common parameters

parameter  
autoplay Whether to automatically start playing the initial video when the player loads. Supported values ​​are 0 or 1. The default value is 0.
controls Whether the video player control will be displayed. Supported values ​​are 0 or 1. The default value is 1.
fs Whether the full screen button of the video player will be displayed. Supported values ​​are 0 or 1. The default value is 1.
loop Whether the video will be played looped. Supported values ​​are 0 or 1. The default value is 0.
playsinline This parameter is used to control whether the video is played in embedded mode or full screen mode when it is played in HTML5 player on iOS devices. Supported values ​​are 0 or 1. The default value is 0 full screen.

Common APIs

()Plays currently inserted/loaded video.

()Pauses the currently playing video.

()Stop and cancel the current video.

()Mute the player.

()Unmute the player.

(width:Number, height:Number)Settings that contains the player<iframe>size.

()Remove the player containing<iframe>。

The above is a detailed explanation of how to use youtube-player in vue3. For more information about using youtube-player in vue3, please follow my other related articles!