Leider erlaubt unser Forum keine Formulare, deshalb: >> So sieht es aus <<

<div class="text">
<label for="type-text">Text (text)</label>
<input type="text" name="type-text" id="type-text" contenteditable inputmode="text">
</div>

<div class="text">
<label for="type-search">Search (search)</label>
<input type="search" name="type-search" id="type-search" contenteditable inputmode="search">
</div>

<div class="text">
<label for="type-tel">Telephone (tel)</label>
<input type="tel" name="type-tel" id="type-tel" contenteditable inputmode="tel">
</div>

<div class="text">
<label for="type-url">URL (url)</label>
<input type="url" name="type-url" id="type-url" contenteditable inputmode="url">
</div>

<div class="text">
<label for="type-email">E-mail (email)</label>
<input type="email" name="type-email" id="type-email" contenteditable inputmode="email">
</div>

<div class="text">
<label for="type-datetime">Date and Time (datetime)</label>
<input type="datetime" name="type-datetime" id="type-datetime">
</div>

<div class="text">
<label for="type-date">Date (date)</label>
<input type="date" name="type-date" id="type-date">
</div>

<div class="text">
<label for="type-month">Month (month)</label>
<input type="month" name="type-month" id="type-month">
</div>

<div class="text">
<label for="type-week">Week (week)</label>
<input type="week" name="type-week" id="type-week">
</div>

<div class="text">
<label for="type-time">Time (time)</label>
<input type="time" name="type-time" id="type-time">
</div>

<div class="text">
<label for="type-datetime-local">Local Date and Time (datetime-local)</label>
<input type="datetime-local" name="type-datetime-local" id="type-datetime-local">
</div>

<div class="text">
<label for="type-number">Number (number)</label>
<input type="number" name="type-number" id="type-number" min="0" max="20" contenteditable inputmode="decimal">
</div>

<div class="text">
<label for="type-range">Range (range)</label>
<input type="range" name="type-range" id="type-range" min="0" max="100" contenteditable inputmode="none">
</div>

<div class="text">
<label for="type-color">Colour (color)</label>
<input type="color" name="type-color" id="type-color">
</div>

<div class="text">
<label for="type-file">File (multiple)</label>
<input type="file" multiple name="type-file" id="type-file">
</div>

<div class="submit-area">
<input type="submit" value="Submit" name="submit">
</div>

In den head-Bereich der Webseite

In eine vorhandene Stylesheet - Datei der Webseite (style.css)

.embed-container {
position: relative;
padding-bottom: 56.25%;   /*56,25% ratio 16x9 -- 74,25% ratio 4:3 -- 50% ratio 16:10*/
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}

.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

oder wie folgt in den head-Bereich der Webseite

<style>
.embed-container {
position: relative;
padding-bottom: 56.25%; /*  56,25% ratio 16x9, 74,25% ratio 4:3, 50% ratio 16:10*/
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}

.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}
</style>

Eingebunden wird das iFrame als HTML-Quellcode wie folgt

<div class="embed-container">
<iframe src="//www.google.com/maps/embed?pb=!4v1638787856228!6m8!1m7!1sCAoSLEFGMVFpcE04bzcyU1FJSnVOMTE3WHBGYllLd2dvRXpOQXNCenRKcVR3TGxK!2m2!1d51.5613699!2d7.18239181!3f328.34!4f-7.920000000000002!5f0.4000000000000002" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

<div class="embed-container">
<iframe> In dieser Zeile kommt Ihr iFrame Code </iframe>
</div>

Die Zeile mit iFrame, muss mit Ihrem iFrame ausgetauscht werden.