Responsive Code lässt sich nicht einbinden

Deutsches Forum
1

Achtung Anfängerfrage:

Wenn ich den Code:

Code:
<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:

<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?

2

<style> Tags gehören nicht in den Inhalt, sondern in den <head> Bereich, weswegen einige Editoren die Tags filtern. Mach mal daraus inline css und es sollte passen

3

Hmm, Danke, aber da hört es mit meinem “Programmier-Künsten” auf. Ist jemand so nett und wandelt den Code ab, so dass man eine youtube url responsive auf allen Geräten dargestellt bekommt?

4 
<div style="position:relative; margin-bottom: 30px; padding-bottom:56.25%; padding-top:25px; height:0; max-width:100%;">
<iframe src="https://youtube.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>
5

Besten Dank! Funktioniert!