6 exakt gleiche iframes, aber einer "tanzt aus der Reihe"

Drapondur · 23.05.2023

Hi,

Ich finde den Fehler nicht..... Es ist keiner da und dennoch tanzt ein iframe aus der Reihe.

Ich habe 6 identische html Seiten geschrieben, deren ausschliessliche Funktion es ist, jeweils ein YouTube Video eingebettet zu haben. Diese 6 Seiten bette ich dann auf meiner Website ein.
(Hintergrund ist, dass die YouTube Videos nicht sofort geladen werden sollen, sondern erst, wenn jemand wirklich eins davon sehen möchte - egal....)

Ich poste hier jetzt zwei von diesen Seiten, die meiner Ansicht nach exakt gleich sind, bis auf das Hintergrundbild und den YouTube-Link.

Aber auf meiner Seite (www.zuunami.de#video <---- da könnt ihr sehen, was ich meine) werden die Play-Buttons nicht auf auf der gleichen Höhe angezeigt, was aber so sein müsste. ich finde den Fehler nicht. 5 funktionieren, eine nicht ganz.....

Seht ihr was am Code, was ich einfach übersehe? Ich danke schon mal im Voraus

PS: Ach so, die Hintergrundgrafiken haben dieselbe Größe im selben Format (webp)

stryker.html (die "fehlerhafte Datei")

Code:

<!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;
}
body {
  margin: 0px;
  padding: 0px;
  background: url(assets/images/stryker.webp);
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center 
}
a {
  color: #FAA000; text-decoration: none;
  background-color:#000;
}
.play {
  border:0px;
  margin: 0px;
  padding: 0px;
  background-color: transparent; 
}
.play img:hover {-webkit-filter: brightness(.5);filter: brightness(.5);}
.play img {-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

</style>
</head>
<body>
 <div style="width: 70%;text-align: center">
  <form action="https://www.youtube-nocookie.com/embed/UssWnmAFccY?allow="accelerometer&autoplay&encrypted-media&gyroscope&picture-in-picture&allowfullscreen" target="_self" style="padding:10px;"><br /><br /><br />
    <button class="play" type="submit" name="start"><img src="assets/images/play.png"></button>
  </form>
 </div>
</body>
</html>

meinsohn.html (funktioniert normal)

Code:

<!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;
}
body {
  margin: 0px;
  padding: 0px;
  background: url(assets/images/meinsohn.webp);
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center 
}
a {
  color: #FAA000; text-decoration: none;
  background-color:#000;
}
.play {
  border:0px;
  margin: 0px;
  padding: 0px;
  background-color: transparent; 
}
.play img:hover {-webkit-filter: brightness(.5);filter: brightness(.5);}
.play img {-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

</style>
</head>
<body>
 <div style="width: 70%;text-align: center">
  <form action="https://www.youtube-nocookie.com/embed/huS4ld5B0bc?allow="accelerometer&autoplay&encrypted-media&gyroscope&picture-in-picture&allowfullscreen" target="_self" style="padding:10px;"><br /><br /><br />
    <button class="play" type="submit" name="start"><img src="assets/images/play.png"></button>
  </form>
 </div>
</body>
</html>

Sempervivum · 25.05.2023

Ich habe mir das anhand des iFrames Mitte oben und des problematischen rechts oben angesehen. Hier offenbaren sich die Nachteile davon wenn man versucht, Elemente mit <br> auszurichten und die Vorteile wenn man das CSS auslagert und nur einmal vorhält:
Der Grund für den Unterschied ist, dass in dem iFrame Mitte oben die Größe der Schrift auf 0.7em gesetzt wird, in dem problematischen finde ich das dagegen nicht, daher ist dort die Schriftgröße 1em, also größer, die <br> fallen höher aus und die Schrift rutscht mehr nach unten.
Abhilfe indem Du die <br> weg lässt und Flex für die horizontale und vertikale Ausrichtung verwendest.
Außerdem empfehle ich, auf das umgebende <div> zu verzichten, es macht das Styling unnötig kompliziert. Dinge wie das form-Tag sind für Styling nicht tabu.

Drapondur · 25.05.2023

Danke Dir für Deine Antwort!
Könnte es jetzt nachvollziehen, weiss nur nicht, warum mein Editor nie die Ansicht aktualisiert hat.....
Liebe Grüße

6 exakt gleiche iframes, aber einer "tanzt aus der Reihe"

Drapondur

New member

Sempervivum

Well-known member

Drapondur

New member

6 exakt gleiche iframes, aber einer "tanzt aus der Reihe"

6 exakt gleiche iframes, aber einer "tanzt aus der Reihe"