Nuxt ContentブログにYouTubeを埋め込む（@nuxt/scripts版）

イントロダクション

この記事では、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 パッケージがインストールされているか確認します。

bash

    pnpm add @nuxt/scripts

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

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

nuxt.config.tsts

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

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

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

components/content/LiteYoutube.vuevue

    <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 を使用してプレーヤーの動作をカスタマイズできます。

vue

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

lite-youtube-embedからの移行

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

パッケージのアンインストール（オプション）
bash
```
    pnpm remove lite-youtube-embed

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

まとめ

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

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