Add 16/9 aspect ratio for video/iframe to default CSS

11ty · Jan 14, 2025 · eea504a · eea504a
1 parent 8b53e14
commit eea504a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -79,6 +79,7 @@ export default async function(eleventyConfig) {
 
 		// widths: ["auto"],
 
+		failOnError: false,
 		htmlOptions: {
 			imgAttributes: {
 				// e.g. <img loading decoding> assigned on the HTML tag will override these values.

diff --git a/public/css/index.css b/public/css/index.css
@@ -72,9 +72,7 @@ body {
 }
 
 /* Fluid images via https://www.zachleat.com/web/fluid-images/ */
-img,
-video,
-iframe {
+img{
   max-width: 100%;
 }
 img[width][height] {
@@ -85,6 +83,12 @@ img[src$=".svg"] {
   height: auto;
   max-width: none;
 }
+video,
+iframe {
+	max-width: 100%;
+	height: auto;
+	aspect-ratio: 16/9;
+}
 
 p:last-child {
 	margin-bottom: 0;