vue3-youtube组件视频无法播放，出现视频播放ID错误问题

问题原因 #

vue3-youtube组件无法直接解析https://youtu.be/xxx这类短链接，它需要的是视频ID或者完整的YouTube播放页链接（https://www.youtube.com/watch?v=xxx），短链接格式会导致组件无法正确提取视频ID，进而触发播放错误。

解决方案 #

有两种可行的修复方式：

方式1：直接传入视频ID #

提取短链接中youtu.be/后面的部分作为视频ID，使用组件的video-id属性：

<template>
  <div class="container">
    <YouTube video-id="GQmO52f26Ws" />
  </div>
</template>

<script setup>
import YouTube from 'vue3-youtube'
</script>

方式2：使用完整的YouTube播放链接 #

把短链接替换成https://www.youtube.com/watch?v=视频ID格式的链接，直接传给url属性：

<template>
  <div class="container">
    <YouTube url="https://www.youtube.com/watch?v=GQmO52f26Ws" />
  </div>
</template>

<script setup>
import YouTube from 'vue3-youtube'
</script>

内容的提问来源于stack exchange，提问作者bxeom