diff --git a/src/components/Plyr/Plyr.vue b/src/components/Plyr/Plyr.vue
index e3a4ea5..a13a418 100644
--- a/src/components/Plyr/Plyr.vue
+++ b/src/components/Plyr/Plyr.vue
@@ -17,7 +17,7 @@ onMounted(() => {
 
 <template>
     <div class="plyrContainer">
-        <video ref="plyrContainer">
+        <video class="object-contain" ref="plyrContainer">
             <source :src="src">
         </video>
     </div>
@@ -25,6 +25,9 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .plyrContainer {
+    height: 80%;
     width: 70%;
+    display: flex;
+    justify-content: center;
 }
 </style>