Youtubeの埋め込み方法

共有したい動画のURLを使用して、Youtubeを埋め込むことができるコンポーネントを作成します。

Youtubeコンポーネントを作成

template

<template>
  <iframe
    :width="width"
    :height="height"
    :src="`https://www.youtube.com/embed/${src}`"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</template>

script

<script setup lang="ts">
interface YoutubeProps {
  width?: number;
  height?: number;
  src: string;
}

const props = defineProps<YoutubeProps>();
</script>

style

<style scoped>
iframe {
  margin: 8px auto;
}
</style>

作成したコンポーネントを使って動画を埋め込む

試しに動画を埋め込んでみます。

上手く再生できていそうです！