Problemchen beim Code einbinden

Programmierung, Templatedesign & Codeschnipsel
Antworten
Benutzeravatar
daytrader
Beiträge: 10605
Registriert: 15. Feb 2009 17:02
Land: Deutschland

Problemchen beim Code einbinden

Achtung Anfängerfrage:

Wenn ich den Code:

Code: Alles auswählen

<style>.iframe-container { position:relative; margin-bottom: 30px; padding-bottom:56.25%; padding-top:25px; height:0; max-width:100%; } .iframe-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }</style><div class="iframe-container"><iframe src="https://youtube.com/embed//xxx" allowfullscreen=""></iframe><br /></div>
in Shop einfüge, macht der HTML Editor des Shops automatisch daraus:

Code: Alles auswählen

<div class="iframe-container"><iframe src="https://youtube.com/embed//xxx" width="300" height="150" allowfullscreen="allowfullscreen"></iframe><br /></div>
Responsive ist damit hin....
Weiß jemand warum? Ok würde ich wahrscheinlich eh nicht raffen....aber wie müsste der Code lauten, damit ich das Video responsive eingebunden bekomme?


3 Monate gratis Händlerbund
Benutzeravatar
Xantiva
PLUS-Mitglied
PLUS-Mitglied
Beiträge: 4047
Registriert: 22. Okt 2010 17:52
Land: Deutschland
Firmenname: Xantiva.de
Branche: Entwickler, aber auch selber Seller!
Kontaktdaten:

Re: Problemchen beim Code einbinden

Offensichtlich akzeptiert der Editor keine Inline-Styles. Pack die CSS-Angaben direkt ins Template und es sollte funktionieren.
Benutzeravatar
Woody-HH
PLUS-Mitglied
PLUS-Mitglied
Beiträge: 2618
Registriert: 29. Mär 2010 19:14
Land: Deutschland

Re: Problemchen beim Code einbinden

Ich hab den Editor meines Shopsystems abgeschaltet. Wenn einer an meinem Code ruminterpretiert bin ich das, und nicht irgendein seltsamere Freeware-Editor.
Cisnet
PLUS-Mitglied
PLUS-Mitglied
Beiträge: 627
Registriert: 7. Dez 2009 22:13
Land: Deutschland
Kontaktdaten:

Re: Problemchen beim Code einbinden

Welches Shopsystem?

Bei Shopware trägst du das Styling ein unter Theme-Manager -> Dein Theme -> Theme konfigurieren -> Reiter Sonstiges - ans Ende scrollen - individuellen CSS-Code hinzufügen

Code: Alles auswählen

.iframe-container { position:relative; margin-bottom: 30px; padding-bottom:56.25%; padding-top:25px; height:0; max-width:100%; } 
.iframe-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
Alternativ kannst du es auch in die CSS-Datei bzw. all.less deines Themes eintragen ... sofern vorhanden.

Im Editor der Seite, in welche das Video angebunden werden soll, dann wie gehabt

Code: Alles auswählen

<div class="iframe-container"><iframe src="https://youtube.com/embed//xxx" width="300" height="150" allowfullscreen="allowfullscreen"></iframe><br /></div>
Benutzeravatar
daytrader
Beiträge: 10605
Registriert: 15. Feb 2009 17:02
Land: Deutschland

Re: Problemchen beim Code einbinden

Danke. Habe den Editor ausgeschaltet, dann geht es. War mich mich Laien das einfachste. Nach dem einbinden des Codes habe ich den Editor wieder eingeschaltet.

Vermutlich darf ich an dem Artikel jetzt aber nichts mehr ändern, da dann der Editor wieder greift. Aber für ganze ohne Editor bin ich nicht fit genug.
Benutzeravatar
Templer
Beiträge: 448
Registriert: 28. Sep 2017 07:22

Re: Problemchen beim Code einbinden

Ich würde dann noch empfehlen, den "Erweiterten Datenschutzmodus" von Youtube beim einbetten zu benutzen, erkennbar an "https://www.youtube-nocookie.com/embed/..."
Cisnet
PLUS-Mitglied
PLUS-Mitglied
Beiträge: 627
Registriert: 7. Dez 2009 22:13
Land: Deutschland
Kontaktdaten:

Re: Problemchen beim Code einbinden

daytrader hat geschrieben:Vermutlich darf ich an dem Artikel jetzt aber nichts mehr ändern ...
Genauso sieht es aus. Wenn du den Artikel direkt im Shopbackend bearbeitest und speicherst, löscht der Editor wieder das Styling.
Benutzeravatar
daytrader
Beiträge: 10605
Registriert: 15. Feb 2009 17:02
Land: Deutschland

Re: Problemchen beim Code einbinden

Habe nun noch einen weiteren Tip bekommen und diesen Code genommen, funktioniert nun auch mit dem Editor. Wird mir nun zumindest auf meinem Desktop und meinem Smartphone in optimaler Größe angezeigt.

Code: Alles auswählen

<div style="position:relative; margin-bottom: 30px; padding-bottom:56.25%; padding-top:25px; height:0; max-width:100%;">
<iframe src="https://www.youtube-nocookie.com/embed//xxx" width="300" height="150" style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;" allowfullscreen="allowfullscreen"></iframe>
<br /></div>
Alt und Title Tag wie bei Bildern gibt es bei Videos nicht?
Antworten

Zurück zu „HTML, PHP, CSS, & Co.“

  • Information