https://games-site.github.io/projects/pacman/index.html
<div style="--aspect-ratio: 16/9;">
<iframe
src="https://games-site.github.io/projects/pacman/index.html"
width="100%"
height="900"
frameborder="0"
>
</iframe>
</div>
[style*=”–aspect-ratio”] > :first-child {
width: 100%;
}
[style*=”–aspect-ratio”] > img {
height: auto;
}
@supports (–custom:property) {
[style*=”–aspect-ratio”] {
position: relative;
}
[style*=”–aspect-ratio”]::before {
content: “https://games-site.github.io/projects/pacman/index.html”;
display: block;
padding-bottom: calc(100% / (var(–aspect-ratio)));
}
[style*=”–aspect-ratio”] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}