---
title: "Nuxt ContentブログにYouTubeを埋め込む（外部プラグイン）"
description: "Nuxt ContentブログにYouTubeを埋め込む（外部プラグイン）"
canonical_url: "https://nuxtation.vercel.app/blog/nuxt3-with-lite-youtube-embed"
---
# Nuxt ContentブログにYouTubeを埋め込む（外部プラグイン）

> Nuxt ContentブログにYouTubeを埋め込む（外部プラグイン）

<lite-youtube playLabel="Vue: What to Expect in 2023 by Evan You - Vue.js Nation 2023" videoId="OrT0tHGXyqE">



</lite-youtube>

## イントロダクション

この記事では、Nuxt 3 と TypeScript を使用して、Nuxt ContentブログにYouTubeビデオを埋め込む方法を紹介します。**lite-youtube-embed**を利用することで、パフォーマンスを損なうことなく、YouTubeビデオを埋め込むことができます。

<alert type="warning">

nuxt3用です。nuxt4からは、[@nuxt/scriptsを使った方](https://nuxtation.vercel.app/blog/nuxt4-with-nuxt-scripts)が良いと思います。

</alert>

## YouTubeを埋め込む

1. lite-youtube-embedのインストール<br />

まず、**lite-youtube-embed**パッケージをプロジェクトに追加します。

```bash
pnpm add lite-youtube-embed
```

1. LiteYoutubeコンポーネントの作成<br />

次に、YouTubeビデオを表示するためのVueコンポーネントを作成します。

```vue [components/content/LiteYoutube.vue]
<template>
 <div class="youtube">
   <lite-youtube :videoId="id"  :playLabel="label" ></lite-youtube>
 </div>
</template>
<script setup lang="ts">
defineProps<{
 videoId: String;
 playLabel: String;
}>();

fetchOnServer: false;

 const target = document.getElementsByClassName("youtube");
 setTimeout(() => {
   // target を unknown 型にキャストする
   const unknownTarget = target as unknown;
   // unknownTarget を HTMLIFrameElement 型にキャストする
   const iframeTarget = unknownTarget as HTMLIFrameElement;
   // iframeTarget.contentWindow が null でないことを確認する
   // if (iframeTarget.contentWindow) {
   //   iframeTarget.contentWindow.focus();
   // }
   // オプショナルチェーン演算子（?.）を使って null の場合は focus() メソッドを呼び出さない
   iframeTarget.contentWindow?.focus();
 }, 0);
</script>
```

このコードでは、**lite-youtube**コンポーネントを使用してYouTubeビデオを表示しています。**id**と**label**はプロパティとして外部から受け取ります。

1. nuxt.configの更新

```ts [nuxt.config.ts]
css: [
  .......
 '@/node_modules/lite-youtube-embed/src/lite-yt-embed.css',
 ],
vue: {
  .......
   compilerOptions: {
     isCustomElement: (tag) => ['lite-youtube'].includes(tag),
   },
 },
```

1. プラグインの作成

Nuxt 3で**lite-youtube-embed**を使用するためのプラグインを作成します。

```ts [app/plugins/youtube.client.ts]
import 'lite-youtube-embed'
  // eslint-disable-next-line no-undef
  export default defineNuxtPlugin(() => {})
```

## markdownファイルに埋め込む

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

```md
::lite-youtube
---
videoId: "OrT0tHGXyqE"
playLabel: "Vue: What to Expect in 2023 by Evan You - Vue.js Nation 2023"
---
::
```

vueファイル内では、

```html
<iframe width="720" height="405" src="https://www.youtube.com/embed/OrT0tHGXyqE"
 title="Vue: What to Expect in 2023 by Evan You - Vue.js Nation 2023"
 frameborder="0" allow="accelerometer; autoplay;
  clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen></iframe>
```

## 参考リンク

- [lite-yutube-embed GitHub](https://github.com/paulirish/lite-youtube-embed)
- [Nuxt Content Documentation](https://content.nuxt.com)


## Sitemap

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