Fix video dimensions

Soleone · Mar 20, 2021 · 7b9ec63 · 7b9ec63
1 parent 88cea15
commit 7b9ec63
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/Video.vue b/src/components/Video.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-card class="mx-auto" max-width="320">
+  <v-card class="mx-auto" :max-width="width">
     <v-card-title>{{ title }}</v-card-title>
     <v-img class="mx-2">
-      <iframe width="320"
-              height="200"
+      <iframe :width="width"
+              :height="height"
               :src="embedUrl"
               frameborder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
@@ -19,6 +19,9 @@
 </template>
 
 <script>
+const DIMENSIONS = {
+}
+
 export default {
   name: 'Video',
   props: {
@@ -39,9 +42,32 @@ export default {
       required: true
     }
   },
+  data() {
+    return {
+      dimensions: {
+        lg: {
+          width: 640,
+          height: 385
+        },
+        sm: {
+          width: 320,
+          height: 200
+        }
+      }
+    }
+  },
   computed: {
     embedUrl() {
       return this.url.replace('/watch?v=', '/embed/')
+    },
+    width() {
+      return this.currentDimensions.width
+    },
+    height() {
+      return this.currentDimensions.height
+    },
+    currentDimensions() {
+      return this.dimensions[this.$vuetify.breakpoint.name] || this.dimensions['sm']
     }
   }
 }

diff --git a/src/views/Videos.vue b/src/views/Videos.vue
@@ -1,11 +1,9 @@
 <template>
   <v-container>
-    <v-row v-for="video in videos" :key="video.uid">
-      <v-spacer></v-spacer>
-      <v-col cols="12">
+    <v-row>
+      <v-col cols="12" lg="6" v-for="video in videos" :key="video.uid">
         <Video :url="video.url" :title="video.title" :category="video.category" :author="video.author" />
       </v-col>
-      <v-spacer></v-spacer>
     </v-row>
   </v-container>
 </template>