Das ist allerdings ein Problem, das nur bei dir sichtbar ist... weil in deinem Cache wohl doch noch Daten drin sind, die der Browser anzeigt. Warum das trotz geleerte Cache passiert... hmmm... keine Ahnung.
Mache bitte mal folgendes:
Schreibe in deine index.html (in den <head> Bereich ...
<meta http-equiv="expires" content="0">Dann sollte der Browser auf jeden Fall die Daten vom Server laden und den Cache-Inhalt ignorieren.
Leere deinen Cache-Speicher, aktualisiere die Seite. Bei mir wird die Index richtig angezeigt.
Schau mal nach, was du zu 'CSS Kindselektor = >' findest und was im Vergleich dazu zum 'CSS Geschwisterselektor = ~' beschrieben ist.
Zunächst mal solltest du deinen Code posten... wie sollen wir sonst sehen, wo der Fehler ist?
ja das ist richtig. Mit contain werden auch Querformat Bilder abgeschnitten.
... dann ist da noch was anders verkehrt, mit 'contain' sollten sowohl Hoch- und Querformatbilder sich genau (ohne Verzerrung) an den verfügbaren Platz anpassen.
In der Simulation mit den Webentwicklertools funktioniert das auch einwandfrei!
Da stimmt was nicht mit deinem JS... in deinem geposteten Code steht...
backgroundSize: 'contain',
das sollte auch richtig sein.
Wenn ich mir diesen Code auf der Seite anzeige lassen, steht dort allerdings ...
<script>
....
backgroundSize: 'inherit',
...
</script>... und die vielen Fehler sind weiterhin im Code...
Das mit den Bildgrößen sollte dein zweites Problem sein, denn im Code sind derart viele Fehler, dass du Gefahr läufst, dass bei der Darstellung der Seite überhaupt nichts mehr passt... siehe dazu das Validator-Ergebnis:
https://validator.w3.org/nu/?doc=https%…or_haeckel.html
Rein optisch zu erkennen auch an zB dem horizontalen Scrollbalken und im oberen Bereich an der nach rechts herausragenden Linie.
Das Problem mit der Bildgröße sollte sich durch die Formatierung 'background-size: contain;' beheben lassen.
Bin aber offen für Neues!
Das ist gut... denn ohne dieses Neue wirst du dein Vorhaben nicht umsetzen können.
Für den Anfang ein kleiner Tipp...
Schau da mal ins 'Tutorial'. Da findest du alles, was du brauchst!
Und wenn es dann konkret wird und du das Erlernte für deine Seite umsetzen willst, dann findest du hier immer Hilfe.
Die Videos laden nicht im Hintergrund, sondern erst dann, wenn du tatsächlich die Seite aufrufst, auf der die IFrames sind, mit denen das Video eingebettet wird.
Wenn du bei deinem jetzigen 'Workflow' (Zugang über .htaccess) bleiben willst, dann musst du diese Bestätigung der Datenschutzbestimmungen und der Cookies auf deine Startseite unterbringen... also erst einloggen und dann nochmal die Bestätigung einholen.
Das sollte mit etwas PHP (vielleicht auch mit JavaScript) recht einfach zu machen sein.
Hast du Erfahrung mit PHP? ... hast du zum testen einer PHP - Seite einen 'Local Host' installiert? ... unterstützt dein Hoster PHP?
So ganz verstehe ich dein Problem jetzt nicht 
.
Wenn du ein Login hast (mit PHP vermute ich) und in diesem Login verpflichtend die Zustimmung zu Cookies und den Datenschutzbestimmungen enthalten ist, dann setze einfach einen Cookie nach dem erfolgreichen Login und lade deine Videos nur dann, wenn der Cookie gesetzt ist.
Abgesehen von den DSGVO würde ich aber die Videos nicht alle ohne aktiven Klick auf einen 'Jetzt starten' Button laden lassen - alleine schon wegen der notwendigen Ladezeit.
Das geht auch einfach(er) nur mit HTML...
Schritt 1.
Erzeuge eine HTML Startseite, die im IFrame angezeigt werden soll, wenn die Seite aufgerufen wird. Etwa so..
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vorschau Video 1</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
background-color: #000;
color: #bbb;
text-align: center;
}
</style>
</head>
<body>
<h2>Bitte beachten Sie die Datenschutzbestimmungen!</h2>
<p>Beim starten des Videos wird eine Verbindung mit YouTube hergestellt. Die bei YouTube geltenden Datenschutzbestimmungen können Sie <a href="https://policies.google.com/privacy?hl=de&gl=de" target="_blank">HIER</a> einsehen.</p>
<form action="https://www.youtube-nocookie.com/embed/Zjh80iwj8rg" target="_self">
<button type="submit" name="start">Starte Video</button>
</form>
<p>Klicken Sie auf 'Start', wenn das Video geladen ist.</p>
</body>
</html>Schritt 2.
Der Link zu dieser 'Vorschauseite' wird im IFrame als src="vorschau_video.html' eingetragen.
Der Link zum Video wird dann beim beim klicken auf 'Starte Video' aus dem <form action="Link_zum_Video"> nachgeladen.
Du könntest dein <select> mit 'style="position: absolute;" ' so formatieren, dass es die nachfolgenden Elemente überdeckt.
Aber dann musst du darauf achten, dass es schon in der Normalansicht richtig positioniert ist, denn mit 'absolute' ist das Element aus dem aus dem Textfluss herausgenommen und Nachfolgende Elemente positionieren sich dann nicht richtig - so als wäre das <select> nicht da.
Versuche es mal hiermit... einfaches JS mit einem 'onclick' Event
<form>
<p>Eine Auswahlliste:</p>
<select id="myForm" name="meine_auswahl" size="1" onclick="showSelect()" onchange="alert(this.value)">
<option value="1">Auswahl 1</option>
<option value="2">Auswahl 2</option>
<option value="3">Auswahl 3</option>
<option value="4">Auswahl 4</option>
<option value="5">Auswahl 5</option>
<option value="6">Auswahl 6</option>
<option value="7">Auswahl 7</option>
<option value="8">Auswahl 8</option>
<option value="9">Auswahl 9</option>
</select>
</form>
<script>
function showSelect() {
var auswahl = document.getElementById("myForm");
if (auswahl.size == "1") {
auswahl.size = "5";
}
else {
auswahl.size = "1";
}
}
</script>Eine Tabelle, wenn man nichts anders festlegt, passt die Spaltenbreite automatisch an den vorhanden Platz an.
In deiner Tabelle könntest du deiner .mittig eine width geben... dann wären die rechten beiden Spalten gleich breit und eben so breit, wie du es vorgibst.
Tabellen sind aber manchmal etwas störrisch. Neben der im CSS vergebenen Breite, spielt auch der Inhalt bei der Darstellung eine Rolle.
Tabellen sind auch schwierig auf kleineren Displays richtig (responsive) darzustellen, aber das müsstest du dann testen, ob das dann für deine Zwecke noch passt.
Uhhhh... da sind so viele HTML Fehler drin, dass ich gar nicht weiß, wo ich anfangen soll - schau dir bitte die Grundlagen (HTML / CSS) nochmal an.
Insbesondere solltest du dir das 'Grundgerüst' einer HTML Seite anschauen... welche Dinge gehören zum Grundgerüst... <!DOCTYPE... sagt dir das was?
Was gehört in den <head></head>... und was nicht.
Verschachtelung von HTML Elementen... veraltete Elemente (<center>...<font color...>... und noch einiges mehr.
.. und was ist das...
</body>
<form method="post"action="Zahlensuchspiel.php">
</form>
</body></html>
nach </body> darf keine HTML Code stehen.. auch nicht, wenn du danach nochmal </body> schreibst. Und dein dein <form> hat überhaupt keine Funktion... was soll das erreichen.
Zu deinem PHP Problem - definiere ein weiteres array (zB $_SESSION['antworten']) und füge die Nutzereingaben mit
$_SESSION['antworten'][] = $_POST['geraten'];hinzu.
Vorher kannst/musst du mit in_array http://php.net/manual/de/function.in-array.php prüfen, ob 'geraten' schon in 'antworten' vorhanden ist.
Der Rest sollte dann einfach sein.... if(!in_array(....)) {...} else {...}
In einem Forum ist Support per PN eher kontraproduktiv... andere Nutzer haben vielleicht ein ähnliches Problem und können dann nicht von eventuellen Antworten profitieren.
Teile deine Datei... vielleicht geht's dann mit dem Hochladen.
Das liegt an der verikalen Positionierung der Bilder. Per Default werden die mit 'vertical-align: baseline;' vom Browser dargestellt... mach daraus ein
.img-fluid {
vertical-align: bottom;
}und alles wird gut 
Kann mir da einer von euch helfen?
Wenn wir den Anhang sehen könnten, vielleicht ja!
Zunächst solltest du deine Seite mit validem HTML erstellen - da sind einige Fehler drin, die Anzeigefehler verursachen können... siehe Link
https://validator.w3.org/nu/?doc=https%…-leistungen.php
Was habe ich beim CSS-Formatieren falsch gemacht?
Die Zuordnung der 'position: absolute/relative' Formatierung ist nicht korrekt. Teste bitte mal, ob folgende Ergänzungen/Änderungen zu deinem CSS dich weiter bringen:
#frw_menu_wrapper ul li ul {
position: absolute;
left: unset;
top: unset;
}
#frw_menu_wrapper ul li:hover ul {
position: absolute;
left: unset;
top:unset;
display: block;
}
#frw_menu_wrapper ul li ul li {
position: relative;
border: 0;
}... sind allerdings sehr schlecht zu lesen deine Menüunterpunkte. Solltest vielleicht eine Hintergrundfarbe hinzufügen.