diff --git a/package.json b/package.json
index 1968bb4..891f736 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "tailwindcss-aspect-ratio": "^3.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 3a5bba0..d35d173 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -14,8 +14,7 @@
   }
 
   .embed-responsive {
-    @apply block relative h-0 p-0 overflow-hidden;
-    padding-bottom: 56.25%
+    @apply block relative h-0 overflow-hidden aspect-ratio-16/9
   }
 
   .embed-responsive .embed-responsive-item,
diff --git a/tailwind.config.js b/tailwind.config.js
index fb607f6..2c1338a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,9 @@ module.exports = {
     ]
   },
   theme: {
+    aspectRatio: {
+      '16/9': [16, 9]
+    },
     colors: {
       black: '#222',
       gray: {
@@ -23,7 +26,9 @@ module.exports = {
     extend: {},
   },
   variants: {},
-  plugins: [],
+  plugins: [
+    require('tailwindcss-aspect-ratio')
+  ],
   experimental: {
     applyComplexClasses: true
   },
diff --git a/yarn.lock b/yarn.lock
index b0ce042..3dcc5a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7726,6 +7726,13 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
+tailwindcss-aspect-ratio@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-aspect-ratio/-/tailwindcss-aspect-ratio-3.0.0.tgz#4f9fc7ca0f3468373290faaa8b92652157bee6a4"
+  integrity sha512-syVueHOdk0u6S9lFSQQxHwsYS+9AJ0tp1WWBB+vAwmJYzc9g/2OLwq4mHpigYue6t3PUgTSbRi9unQd7WEDjGQ==
+  dependencies:
+    lodash "^4.17.15"
+
 tailwindcss@^1.8.5:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.8.5.tgz#3b4624530b5fd71688fd04d16d8bd8c8d56834de"