From 8e40f908076032fb6dbedb897b9c0c2c976631ac Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 12 Mar 2021 08:22:07 +0000
Subject: [PATCH] Use Tailwind CSS aspect ratio plugin for videos

---
 .../opdavies/assets/css/components/video.pcss       | 11 -----------
 web/themes/custom/opdavies/package-lock.json        |  6 ++++++
 web/themes/custom/opdavies/package.json             |  1 +
 web/themes/custom/opdavies/tailwind.config.js       |  2 ++
 .../templates/field/field--media--video.html.twig   | 13 ++++++++++---
 5 files changed, 19 insertions(+), 14 deletions(-)
 delete mode 100644 web/themes/custom/opdavies/assets/css/components/video.pcss

diff --git a/web/themes/custom/opdavies/assets/css/components/video.pcss b/web/themes/custom/opdavies/assets/css/components/video.pcss
deleted file mode 100644
index 87d8b87..0000000
--- a/web/themes/custom/opdavies/assets/css/components/video.pcss
+++ /dev/null
@@ -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
-    }
-  }
-}
diff --git a/web/themes/custom/opdavies/package-lock.json b/web/themes/custom/opdavies/package-lock.json
index bcda635..5c3df25 100644
--- a/web/themes/custom/opdavies/package-lock.json
+++ b/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",
diff --git a/web/themes/custom/opdavies/package.json b/web/themes/custom/opdavies/package.json
index ccbd384..980eef9 100644
--- a/web/themes/custom/opdavies/package.json
+++ b/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",
diff --git a/web/themes/custom/opdavies/tailwind.config.js b/web/themes/custom/opdavies/tailwind.config.js
index e071d01..9e516d2 100644
--- a/web/themes/custom/opdavies/tailwind.config.js
+++ b/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
diff --git a/web/themes/custom/opdavies/templates/field/field--media--video.html.twig b/web/themes/custom/opdavies/templates/field/field--media--video.html.twig
index 36db1fc..8c7b4e3 100644
--- a/web/themes/custom/opdavies/templates/field/field--media--video.html.twig
+++ b/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>