From 7b9ec63fac291b4631bfbfb278e8e3d15e97531c Mon Sep 17 00:00:00 2001
From: Dennis Theisen <dennis@shopify.com>
Date: Sat, 20 Mar 2021 17:20:06 -0400
Subject: [PATCH] Fix video dimensions

---
 src/components/Video.vue | 32 +++++++++++++++++++++++++++++---
 src/views/Videos.vue     |  6 ++----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/Video.vue b/src/components/Video.vue
index abf2456..b3c56de 100644
--- 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
index 61edbb3..ff8ab5a 100644
--- 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>