---
title: "@nuxt/scriptsを使ってYouTubeを埋め込む"
description: "@nuxt/scriptsのScriptYouTubePlayerを使用してNuxt ContentブログにYouTubeビデオを埋め込む方法"
canonical_url: "https://nuxtation.vercel.app/blog/nuxt4-with-nuxt-scripts"
---
# @nuxt/scriptsを使ってYouTubeを埋め込む

> @nuxt/scriptsのScriptYouTubePlayerを使用してNuxt ContentブログにYouTubeビデオを埋め込む方法

<lite-youtube playLabel="Loading Third Party Assets with Nuxt Scripts" videoId="sjMqUUvH9AE">



</lite-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`パッケージがインストールされているか確認します。

```bash
pnpm add @nuxt/scripts
```

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

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

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

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

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

```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ビデオを埋め込む場合は、以下のカスタムコンポーネント構文を使用します。

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

`videoId`にはYouTube動画のIDを指定します。URLが [https://www.youtube.com/watch?v=sjMqUUvH9AE](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`を使用していた場合](https://nuxtation.vercel.app/blog/nuxt3-with-lite-youtube-embed)、以下の手順で移行できます：

1. **パッケージのアンインストール**（オプション）```bash
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](https://github.com/nuxt/scripts)
- [@nuxt/scripts Documentation](https://scripts.nuxt.com/)
- [YouTube IFrame API Reference](https://developers.google.com/youtube/iframe_api_reference)
- [Nuxt Content Documentation](https://content.nuxt.com)


## Sitemap

See the full [sitemap](https://nuxtation.vercel.app/sitemap.md) for all pages.