Use Tailwind CSS aspect ratio plugin for videos

web/themes/custom/opdavies/assets/css/components/video.pcss

@@ -1,11 +0,0 @@
-@layer components {
-  .video-full {
-    @apply w-full relative;
-    padding-top: 56.25%;
-
-    iframe,
-    embed {
-      @apply absolute h-full left-0 top-0 w-full
-    }
-  }
-}

web/themes/custom/opdavies/package-lock.json

@@ -1216,6 +1216,12 @@
         "yargs-parser": "^18.1.3"
       }
     },
+    "@tailwindcss/aspect-ratio": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.2.0.tgz",
+      "integrity": "sha512-v5LyHkwXj/4lI74B06zUrmWEdmSqS43+jw717pkt3fAXqb7ALwu77A8t7j+Bej+ZbdlIIqNMYheGN7wSGV1A6w==",
+      "dev": true
+    },
     "@tailwindcss/forms": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",

web/themes/custom/opdavies/package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^0.33.0",
+    "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/forms": "^0.2.1",
     "@tailwindcss/typography": "^0.3.1",
     "alpinejs": "^2.3.5",

web/themes/custom/opdavies/tailwind.config.js

@@ -1,3 +1,4 @@
+const aspectRatio = require('@tailwindcss/aspect-ratio')
 const colors = require('./tailwind-colours')
 const defaultConfig = require('tailwindcss/defaultConfig')
 const defaultTheme = require('tailwindcss/defaultTheme')
@@ -73,6 +74,7 @@ module.exports = {
     container: false
   },
   plugins: [
+    aspectRatio,
     focusVisible,
     forms,
     typography

web/themes/custom/opdavies/templates/field/field--media--video.html.twig

@@ -40,16 +40,23 @@
   label_display == 'visually_hidden' ? 'visually-hidden',
 ] %}
 
+{% set video_classes = [
+  'aspect-h-9',
+  'aspect-w-16',
+] %}
+
+{{ video_classes }}
+
 {% if label_hidden %}
   {% if multiple %}
     <div{{ attributes }}>
       {% for item in items %}
-        <div{{ item.attributes.addClass('video-full') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass(video_classes) }}>{{ item.content }}</div>
       {% endfor %}
     </div>
   {% else %}
     {% for item in items %}
-      <div{{ attributes.addClass('video-full') }}>{{ item.content }}</div>
+      <div{{ attributes.addClass(video_classes) }}>{{ item.content }}</div>
     {% endfor %}
   {% endif %}
 {% else %}
@@ -59,7 +66,7 @@
     <div>
       {% endif %}
       {% for item in items %}
-        <div{{ item.attributes.addClass('video-full') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass(video_classes) }}>{{ item.content }}</div>
       {% endfor %}
       {% if multiple %}
     </div>