Try to fix aspect ratio issues

diff --git a/cx/lib/markdown.php b/cx/lib/markdown.php
index 771b9476370ed2546633eabdf9aea85454e87d8d..aab58d59e005f0d5006e7918cbc2cbb4cbd20b74 100644 (file)
--- a/cx/lib/markdown.php
+++ b/cx/lib/markdown.php
@@ -49,10 +49,10 @@ class ExtendedParsedown extends Parsedown {
                                        'name' => 'iframe',
                                        'text' => '',
                                        'attributes' => array(
                                        'name' => 'iframe',
                                        'text' => '',
                                        'attributes' => array(

-                                               'id' => "ytplayer",
+                                               'class' => "video",

                                                'type' => "text/html",
                                                'type' => "text/html",

-                                               'width' => "640",
-                                               'height' => "360",
+                                               //'width' => "640",
+                                               //'height' => "360",

                                                'src' => "https://www.youtube.com/embed/" . $video_id,
                                                'frameborder' => "0",
                                                'loading' => "lazy",
                                                '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 a09110f5aa19d0fe155cf0d17e17a781a7fa7c0f..27e627b0db15a2fbda74e8e243ca772d0778515f 100644 (file)
--- a/public/design/css/style.css
+++ b/public/design/css/style.css
@@ -145,12 +145,19 @@ article + article {
 article img {
        display: block;
        width: 100%;
 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;
 }
 
        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;
 /*@supports (aspect-ratio: 1) {
        article img {
                max-height: unset;