Vue.js 2绑定API返回YouTube链接时iframe/video标签失效问题

问题描述 #

使用Vue.js 2循环渲染API返回的图库数据gallerydata时，将iframe的src绑定为API返回的YouTube视频链接，视频无法正常显示；但直接在src中写入嵌入格式的链接则可以正常工作。

问题原因 #

API返回的YouTube链接大概率是普通观看格式（如https://www.youtube.com/watch?v=abc123），而iframe加载YouTube视频需要使用嵌入专用格式（如https://www.youtube.com/embed/abc123），两种格式不兼容，导致直接绑定普通链接无法加载视频。

解决方案 #

需要将API返回的普通YouTube链接转换为嵌入格式，具体步骤如下：

1. 添加链接转换方法 #

在Vue组件的methods中添加转换函数，提取视频ID并拼接成嵌入链接：

methods: {
  convertToYoutubeEmbed(link) {
    // 处理普通YouTube观看链接
    if (link.includes('youtube.com/watch?v=')) {
      const videoId = link.split('v=')[1].split('&')[0];
      return `https://www.youtube.com/embed/${videoId}`;
    }
    // 处理YouTube短链接
    if (link.includes('youtu.be/')) {
      const videoId = link.split('youtu.be/')[1].split('?')[0];
      return `https://www.youtube.com/embed/${videoId}`;
    }
    // 非YouTube链接或已为嵌入格式，直接返回原链接
    return link;
  }
}

2. 修改模板中的iframe绑定 #

将原有的:src="item.video_link"替换为转换后的链接：

<div
    class="gallery-hover-wrap"
    data-aos="fade-up"
    v-for="(item, index) in gallerydata"
    :key="index"
>
    <img
      v-if="item.image"
      :src="item.image"
      style="width: 100%"
      @click="OpenGalleryPopFun(item)"
      class="itemimg"
    />
    <div v-if="item.video_link">
      <iframe 
        :src="convertToYoutubeEmbed(item.video_link)" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        allowfullscreen
      >
      </iframe>
    </div>
</div>

扩展说明 #

如果需要保留原链接的参数（如播放起始时间&t=10s），可以调整转换逻辑：

// 处理带参数的观看链接
if (link.includes('youtube.com/watch?v=')) {
  const [baseUrl, params] = link.split('?');
  const videoId = baseUrl.split('v=')[1];
  return `https://www.youtube.com/embed/${videoId}?${params}`;
}

内容的提问来源于stack exchange，提问作者Shahab Dad Khan