Post AampvRlonRfS4bxQLA by Jbasoo@mastodon.social
 (DIR) More posts by Jbasoo@mastodon.social
 (DIR) Post #AalymUxCcImZGBr8L2 by lamp@kitty.haus
       2023-10-14T21:10:53.649267Z
       
       0 likes, 0 repeats
       
       I just want to force the aspect ratio of an iframe to be 16/9, then have it fit the center of the screen. Why is this so difficult? #css
       
 (DIR) Post #Aam4TIv3jiDS9t5Hs0 by Jbasoo@mastodon.social
       2023-10-14T22:04:18Z
       
       0 likes, 0 repeats
       
       @lamp not sure of your exact situation but this should get you in the right direction.```.container {  display: grid;  place-items: center;}iframe {  aspect-ratio: 16/9;}```
       
 (DIR) Post #Aam4TJwVvmyRKglxmC by lamp@kitty.haus
       2023-10-14T22:14:39.768355Z
       
       0 likes, 0 repeats
       
       @Jbasoo this is what i did
       
 (DIR) Post #Aam8SLlm3MskWdXeQi by Jbasoo@mastodon.social
       2023-10-14T22:21:45Z
       
       0 likes, 0 repeats
       
       @lamp yeah I guess that works. It wont be as performant as pure CSS though so not the kind of thing I'd ship now that CSS has aspect-ratio.I was doing a YouTube embed too recently and grid + aspect-ratio was a very clean solution.
       
 (DIR) Post #Aam8SMV9KfB6nMlt9k by lamp@kitty.haus
       2023-10-14T22:59:15.457331Z
       
       0 likes, 0 repeats
       
       @Jbasoo still no idea how to make the iframe expand to fit the screen, but by using grid instead of transform, now the body & html element make sense in the dom inspector instead of having 0 height.
       
 (DIR) Post #AampvRlonRfS4bxQLA by Jbasoo@mastodon.social
       2023-10-15T06:57:44Z
       
       0 likes, 0 repeats
       
       @lamp Nice! Yeah, positioning absolutely means it's not in the natural flow of content so the parent element treats it as if it's not there and collapses.Adding `width: 100%;` to the iframe would make it fill the width of the body. That's where you'd need to maintain the aspect ratio with `aspect-ratio: 16/9;`
       
 (DIR) Post #AampvSWbzT68PjqnHE by lamp@kitty.haus
       2023-10-15T07:06:18.168876Z
       
       0 likes, 0 repeats
       
       @Jbasoo yeah... and again as always, that's not what i want, it'll clip the top and bottom. I need exactly what my js does.