From: Ben Sherratt <redacted>
Date: Sun, 17 Mar 2024 14:12:40 +0000 (+0000)
Subject: Try to fix aspect ratio issues
X-Git-Url: https://git.bts.cx/cx.git/commitdiff_plain/af380ed734795855fb40fbb311c3a85d052d3a83?ds=inline

Try to fix aspect ratio issues
---

diff --git a/cx/lib/markdown.php b/cx/lib/markdown.php
index 771b947..aab58d5 100644
--- a/cx/lib/markdown.php
+++ b/cx/lib/markdown.php
@@ -49,10 +49,10 @@ class ExtendedParsedown extends Parsedown {
 					'name' => 'iframe',
 					'text' => '',
 					'attributes' => array(
-						'id' => "ytplayer",
+						'class' => "video",
 						'type' => "text/html",
-						'width' => "640",
-						'height' => "360",
+						//'width' => "640",
+						//'height' => "360",
 						'src' => "https://www.youtube.com/embed/" . $video_id,
 						'frameborder' => "0",
 						'loading' => "lazy",
diff --git a/public/design/css/style.css b/public/design/css/style.css
index a09110f..27e627b 100644
--- a/public/design/css/style.css
+++ b/public/design/css/style.css
@@ -145,12 +145,19 @@ article + article {
 article img {
 	display: block;
 	width: 100%;
-	min-height: 20rem;
-	max-height: 40vh;
+	aspect-ratio: 640 / 360;
+	/*min-height: 20rem;
+	max-height: 40vh;*/
 	object-fit: cover;
 	margin: 0 auto 1rem !important;
 }
 
+article iframe {
+	display: block;
+	width: 100%;
+	aspect-ratio: 640 / 360;
+}
+
 /*@supports (aspect-ratio: 1) {
 	article img {
 		max-height: unset;