@nuxt/scriptsを使ってYouTubeを埋め込む

イントロダクション

この記事では、Nuxt 4と@nuxt/scriptsを使用して、Nuxt ContentブログにYouTubeビデオを埋め込む方法を紹介します。@nuxt/scriptsのScriptYouTubePlayerを利用することで、SSR対応かつパフォーマンスを損なうことなく、YouTubeビデオを埋め込むことができます。

@nuxt/scriptsとは

@nuxt/scriptsは、Nuxt公式のスクリプト管理ツールで、サードパーティスクリプトの読み込みを最適化します。YouTube IFrame APIの自動読み込みとSSR対応により、従来のlite-youtube-embedよりも互換性が高く、設定もシンプルです。

YouTubeを埋め込む

1. @nuxt/scriptsのインストール

まず、@nuxt/scriptsパッケージがインストールされているか確認します。

pnpm add @nuxt/scripts

2. nuxt.configにモジュールを追加

nuxt.config.tsのmodules配列に@nuxt/scriptsを追加します。

export default defineNuxtConfig({
  modules: [
    '@nuxt/scripts',
    // ... 他のモジュール
  ],
})

3. LiteYoutubeコンポーネントの作成

次に、YouTubeビデオを表示するためのVueコンポーネントを作成します。components/content/LiteYoutube.vueに以下のコードを配置します。

<script setup lang="ts">
const props = defineProps<{
  videoId: string;
  playLabel?: string;
}>();
</script>

<template>
  <div class="youtube-wrapper">
    <ScriptYouTubePlayer
      :video-id="videoId"
      :player-vars="{
        modestbranding: 1,
        rel: 0
      }"
    />
  </div>
</template>

<style scoped>
.youtube-wrapper {
  margin: 2rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}

.youtube-wrapper :deep(iframe) {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

このコンポーネントは、@nuxt/scriptsのScriptYouTubePlayerコンポーネントを使用してYouTubeビデオを表示します。

4. コンポーネントの特徴

• SSR対応: サーバーサイドレンダリングに完全対応
• 自動スクリプト読み込み: YouTube IFrame APIを自動的に読み込み
• パフォーマンス最適化: 遅延読み込みとリソース最適化
• シンプルな実装: 複雑な設定や追加のプラグインが不要

markdownファイルに埋め込む

ブログ記事内で直接YouTubeビデオを埋め込む場合は、以下のカスタムコンポーネント構文を使用します。

::lite-youtube
---
videoId: "sjMqUUvH9AE"
playLabel: "Loading Third Party Assets with Nuxt Scripts"
---
::

videoIdにはYouTube動画のIDを指定します。URLが https://www.youtube.com/watch?v=sjMqUUvH9AE の場合、sjMqUUvH9AEがvideoIdになります。

playerVarsのカスタマイズ

ScriptYouTubePlayerでは、YouTube IFrame APIのplayerVarsを使用してプレーヤーの動作をカスタマイズできます。

<ScriptYouTubePlayer
  :video-id="videoId"
  :player-vars="{
    modestbranding: 1,  // YouTubeロゴを控えめに
    rel: 0,             // 関連動画を表示しない
    autoplay: 0,        // 自動再生しない
    controls: 1,        // コントロールを表示
    loop: 0,            // ループ再生しない
  }"
/>

lite-youtube-embedからの移行

以前lite-youtube-embedを使用していた場合、以下の手順で移行できます：

1. パッケージのアンインストール（オプション）

   pnpm remove lite-youtube-embed
   

2. nuxt.configのクリーンアップ
   • css配列からlite-youtube-embedのCSSを削除
   • build.transpileからlite-youtube-embedを削除
   • vue.compilerOptions.isCustomElementからlite-youtubeを削除
   • 不要なscripts配列の設定を削除
3. プラグインの削除plugins/youtube.client.jsが不要になります。
4. コンポーネントの更新 上記のScriptYouTubePlayerを使用したコンポーネントに置き換えます。
5. mdファイルの構文はそのまま::lite-youtube構文は変更不要で、引き続き使用できます。

まとめ

@nuxt/scriptsのScriptYouTubePlayerを使用することで、以下のメリットがあります：

• 公式サポート: Nuxt公式のツールのため、長期的なサポートが期待できる
• SSR完全対応: サーバーサイドレンダリング時のエラーがない
• シンプルな実装: 追加のプラグインやカスタム要素の設定が不要
• パフォーマンス: 最適化されたスクリプト読み込みとリソース管理
• 互換性: Nuxtのエコシステムと完全に統合

参考リンク

• @nuxt/scripts GitHub
• @nuxt/scripts Documentation
• YouTube IFrame API Reference
• Nuxt Content Documentation