イントロダクション
この記事では、Nuxt 3 と TypeScript を使用して、Nuxt ContentブログにYouTubeビデオを埋め込む方法を紹介します。lite-youtube-embedを利用することで、パフォーマンスを損なうことなく、YouTubeビデオを埋め込むことができます。
YouTubeを埋め込む
- lite-youtube-embedのインストール
まず、lite-youtube-embedパッケージをプロジェクトに追加します。
bash
pnpm add lite-youtube-embed
- LiteYoutubeコンポーネントの作成
次に、YouTubeビデオを表示するためのVueコンポーネントを作成します。
components/LiteYoutube.vuevue
<template>
<div class="youtube">
<lite-youtube :videoid="id" :playlabel="label" ></lite-youtube>
</div>
</template>
<script setup lang="ts">
defineProps<{
id: String;
label: 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はプロパティとして外部から受け取ります。
- nuxt.configの更新
nuxt.config.tsts
css: [
.......
'@/node_modules/lite-youtube-embed/src/lite-yt-embed.css',
],
vue: {
.......
compilerOptions: {
isCustomElement: (tag) => ['lite-youtube'].includes(tag),
},
},
- プラグインの作成
Nuxt 3でlite-youtube-embedを使用するためのプラグインを作成します。
plugins/youtube.client.tsts
import 'lite-youtube-embed'
// eslint-disable-next-line no-undef
export default defineNuxtPlugin(() => {})
markdownファイルに埋め込む
ブログ記事内で直接YouTubeビデオを埋め込む場合は、以下のHTMLまたはカスタム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>
または、
md
<lite-youtube id="OrT0tHGXyqE" label="Vue: What to Expect in 2023 by Evan You - Vue.js Nation 2023" params="rel=0&start=0">
</lite-youtube>