Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
Das ist ein bisschen Fummelkram, denn die Proportionen des Videos (Breite * Höhe) müssen ja irgendwie auch passen und erhalten bleiben, wenn das Display kleiner wird.
Da das Video in einem IFrame läuft, sind dessen Proportionen ausschlaggebend - das Video im Frame nimmt sich dann den Platz, der ihm gegeben wird.
Teste bitte mal folgendes (im 'zusätzlichen CSS'):
iframe#_dytid_9929 {
width: 788px;
max-width: 100%;
height: 439px;
display: block;
margin: 0px auto;
}
@media screen and (max-width: 852px) {
iframe#_dytid_9929 {
height: calc(100vw / 1.96);
}
}
@media screen and (max-width: 654px) {
iframe#_dytid_9929 {
height: calc(100vw / 2.0);
}
}Seh ich...
Fehler Nr1: Du direkt vor der Stelle in deinem CSS, wo du den Code eingefügt hast, eine weiter @mediaQuery stehen
@media only screen and (max-width: 800px) and (orientation: portrait) {
#mein_hinweis {
display: block;
}
.x-alert-success {
background : none;
}
}
Da hast du aus Versehen die abschließende geschweifte Klammer [COLOR=#ff0000]}[/COLOR] gelöscht!
Fehler Nr2: Warum auch immer ist die ID des IFrames jetzt anders??? Hast du sonst irgendwas an der Seite geändert?
Auf jeden Fall heißt das Element jetzt
iframe#_dytid_9486
das müsstest du in deinem CSS korrigieren.
Sollte sich diese ID des IFrames nochmal ändern, was eigentlich nicht sein sollte, melde dich wieder, dann finden wir einen anderen Selektor!
Fehler Nr2: Warum auch immer ist die ID des IFrames jetzt anders??? Hast du sonst irgendwas an der Seite geändert?
Falls die ID warum auch immer dynamisch ist, könnte man z.B auch sowas verwenden:[FONT=courier new] iframe[src*="youtube.com"] { .. }[/FONT]
Falls die ID warum auch immer dynamisch ist, könnte man z.B auch sowas verwenden:[FONT=courier new] iframe[src*="youtube.com"] { .. }[/FONT]
die ID ändert sich offensichtlich ständig, was muss ich denn hier [FONT=courier new]{ .. } [/FONT]anstatt der .. eintragen?
Grüße Blume
statt 'iframe#_dytid_9486' - was sich ja wohl dynamisch ändert..
setzt du [FONT=courier new]iframe[src*="youtube.com"]
siehe Beitrag #5 von @b3317133
Sollte das auch nicht funktionieren... es gibt noch etliche weitere Möglichkeiten diesen IFrame im CSS anzusprechen!
[/FONT]
gerade getestet... mit [FONT=courier new]iframe[src*="youtube.com"] funktioniert das - [size=14]aber du hast immer noch nicht den Fehler Nr1 (fehlende abschließende Klammer) beseitigt.[/SIZE]
Der neue Code muss also so aussehen!
iframe[src*="youtube.com"] {
width: 788px;
max-width: 100%;
height: 439px;
display: block;
margin: 0px auto;
}
@media screen and (max-width: 852px) {
iframe[src*="youtube.com"] {
height: calc(100vw / 1.96);
}
}
@media screen and (max-width: 654px) {
iframe[src*="youtube.com"] {
height: calc(100vw / 2.0);
}
}... aber solange du den Fehler darüber nicht bereinigst, wird das nicht wirken!
Eine MediaQuery baut sich immer folgendermaßen auf
Media screen and (max-width: xxx) { [COLOR=#ff0000]<- das ist die öffnende Klammer für die Query![/COLOR]
[/FONT]
[FONT=courier new][FONT=courier new] iframe[src*="youtube.com"] { [COLOR=#ff0000]<- das ist die öffnende Klammer für die CSS Anweisung![/COLOR]
height: calc(100vw / 2.0);
} [/FONT][/FONT][FONT=courier new][COLOR=#ff0000][FONT=courier\ new][FONT=courier\ new][FONT=courier\ new]<- das ist die schließende Klammer für die CSS Anweisung![/FONT][/FONT] [/FONT][/COLOR]
[FONT=courier new][FONT=courier new]} [/FONT][/FONT][FONT=courier new][COLOR=#ff0000][FONT=courier\ new][FONT=courier\ new][FONT=courier\ new]<- das ist die schließende Klammer für die Query![/FONT][/FONT]
[/FONT][/COLOR][FONT=courier\ new][COLOR=#000000]CSS ist da sehr sensibel... wenn die Syntax[/COLOR][/FONT] falsch ist dann wird die Anweisung entweder fehlerhaft oder gar nicht umgesetzt!
[/FONT]
[/FONT]
[FONT=courier new]iframe[src*="youtube.com"][/FONT] greift für alle iframes, in deren [FONT=courier new]src[/FONT] Attribut irgendwo der Textteil [FONT=courier new]youtube.com[/FONT] vorkommt, mehr dazu: CSS Selectors.
1. Im [FONT=courier new]<head>[/FONT] Bereich der Seite ist fälschlicherweise dieser Code eingefügt: [FONT=courier new]<a href="#0" class="sb2t" title="Back To Top"> </a>[/FONT], das hat da nichts verloren.
2. Der CSS-Code hat Kommentarfehler, Kommentare werden in CSS zwischen [FONT=courier new]/* und */[/FONT] gesetzt, nicht hinter [FONT=courier new]#[/FONT]
.ubermenu-main {
[COLOR=#ff0000]# border: solid 3px #d5b556;[/COLOR]
...
.ubermenu-responsive-toggle {
margin-bottom: -10px;
margin-top: -15px;
[COLOR=#ff0000]# border: solid 3px #d5b556;
# border-radius: 6px;[/COLOR]
...
3. Ein } zuviel führt dazu, dass die iframe-Regeln nicht angewendet werden.
...
.x-alert-success {
background : none;
}
[size=12][B][COLOR=#ff0000]}[/COLOR][/B][/SIZE]
iframe[src*="youtube.com"] {
width: 788px;
max-width: 100%;
height: 439px;
display: block;
margin: 0px auto;
}
...
Am Rande: Solche Fehler entstehen allerdings nicht durch die Nutzung von "Duplicator" sondern waren schon vorher vorhanden oder wurden nachträglich eingebaut...
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!