<div class='embed-container'>
<iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#hideheader=true' allowfullscreen="true" style='border:0'></iframe>
</div>
.embed-container {
position: relative;
height: 400px;
width: 960px;
overflow: hidden;
max-width: 100%;
margin: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
In der variable --header-height können Sie die Höhe eines position:fixed; Headers angeben um diese von der Iframe-Höhe abzuziehen.
:root {
--header-height: 0px;
}
@media (min-height: 510px) {
.embed-container {
height: calc(500px - var(--header-height, 0));
}
}
@media (min-height: 610px) {
.embed-container {
height: calc(600px - var(--header-height, 0));
}
}
@media (min-height: 710px) {
.embed-container {
height: calc(700px - var(--header-height, 0));
}
}
@media (min-height: 810px) {
.embed-container {
height: calc(800px - var(--header-height, 0));
}
}
@media (min-height: 910px) {
.embed-container {
height: calc(900px - var(--header-height, 0));
}
}
/* Max height */
@media (min-height: 1010px) {
.embed-container {
height: calc(1000px - var(--header-height, 0));
}
}