Create video player component

components/video/player.vue

@@ -0,0 +1,38 @@
+<template>
+    <div
+        :style="{
+            'left': '50%',
+            'right': '50%',
+            'margin-left': '-50vw',
+            'margin-right': '-50vw'
+        }"
+        class="video-canvas w-screen flex justify-center bg-black"
+    >
+        <div class="ratio-wrapper w-full max-w-4xl">
+            <div class="relative overflow-hidden w-full pb-16/9">
+                <iframe
+                    :src="`https://www.youtube-nocookie.com/embed/${video.id}?autoplay=1&modestbranding=1&playsinline=1`"
+                    class="absolute h-full w-full object-cover"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    // components: {
+    //     VideoCard
+    // },
+    props: {
+        video: {
+            type: Object,
+            required: true
+        }
+    }
+}
+</script>

pages/tv/_slug.vue

@@ -1,27 +1,9 @@
 <template>
     <section class="container py-16">
         <div class="flex flex-col items-center text-center space-y-6">
-            <div
+            <VideoPlayer
-                :style="{
+                :video="video"
-                    'left': '50%',
+            />
-                    'right': '50%',
-                    'margin-left': '-50vw',
-                    'margin-right': '-50vw'
-                }"
-                class="video-canvas w-screen flex justify-center bg-black"
-            >
-                <div class="ratio-wrapper w-full max-w-4xl">
-                    <div class="relative overflow-hidden w-full pb-16/9">
-                        <iframe
-                            :src="`https://www.youtube-nocookie.com/embed/${video.id}?autoplay=1&modestbranding=1&playsinline=1`"
-                            class="absolute h-full w-full object-cover"
-                            frameborder="0"
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                            allowfullscreen
-                        />
-                    </div>
-                </div>
-            </div>
 
             <h1 class="title text-sm md:text-3xl font-semibold">
                 {{ video.name }}
@@ -75,12 +57,14 @@
 import LinkButton from '~/components/link-button.vue'
 import EmailSubscribe from '~/components/email-subscribe.vue'
 import VideoRow from '~/components/video/row.vue'
+import VideoPlayer from '~/components/video/player.vue'
 
 export default {
     components: {
         LinkButton,
         EmailSubscribe,
-        VideoRow
+        VideoRow,
+        VideoPlayer
     },
     async asyncData ({ params: { slug } }) {