Von Haus aus wird ein iframe wie folgt eingebunden:<\/p>\n
Dieser \u201eStandardcode\u201d erf\u00e4hrt nun ein paar Erg\u00e4nzungen. Zun\u00e4chst kommt im Stylesheet die anfangs erw\u00e4hnte Anweisung hinzu, um die Breite flexibel zu machen:<\/p>\n Beim Verkleinern passt sich das Video zwar in der Breite an, aber nicht in der H\u00f6he. Es entsteht ein Leerraum unterhalb des Videos. Mit der Angabe height: auto; kann man bei einem iFrame nichts ausrichten. Daher kommt nun der padding-bottom-Trick zum Einsatz. Hierf\u00fcr wird der iFrame zun\u00e4chst mit einem div-Element umschlossen, dass eine id oder Klasse erh\u00e4lt: .iframe-container > iframe { Dieser padding-bottom Wert l\u00e4sst sich mit einem Dreisatz errechnen. Hierzu zieht man das Seitenverh\u00e4ltnis des Videos heran, in diesem Falle 16:9, und rechnet: 9 x 100% \/ 16, das ergibt 56,25%. Hat das Video ein Seitenverh\u00e4ltnis von 4:3 kommt man auf 75%. Somit wird die H\u00f6he des Videos immer im richtigen Verh\u00e4ltnis zur Breite angepasst.<\/p>\n","protected":false},"excerpt":{"rendered":" Von Haus aus wird ein iframe wie folgt eingebunden: <iframe src=“https:\/\/www.youtube.com\/embed\/R-EGKpbIBuw“ width=“560″ height=“315″ frameborder=“0″ allowfullscreen=“allowfullscreen“><\/iframe> Dieser \u201eStandardcode\u201d erf\u00e4hrt nun ein paar Erg\u00e4nzungen. Zun\u00e4chst kommt im Stylesheet die anfangs erw\u00e4hnte Anweisung hinzu, um die Breite flexibel zu machen: iframe { max-width: 100%; } Beim Verkleinern passt sich das Video zwar in der Breite an, aber nicht […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-36","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36"}],"version-history":[{"count":0,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/36\/revisions"}],"wp:attachment":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} <iframe src=\"https:\/\/www.youtube.com\/embed\/R-EGKpbIBuw<\/a>\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe> <\/code><\/p>\n iframe {
\nmax-width: 100%;
\n} <\/code><\/p>\n
\n
\n<div class=\"iframe-container\">
\n<iframe src=\"https:\/\/www.youtube.com\/embed\/R-EGKpbIBuw<\/a>\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>
\n<\/div>
\n<\/code>
\nDiesem Element wird u. a. die H\u00f6he des iFrame-Seitenverh\u00e4ltnisses in Prozent als padding-bottom zugewiesen:<\/p>\n .iframe-container {
\nposition: relative;
\nheight: 0;
\npadding-bottom: 56.25%;
\nwidth: 100%;
\n}<\/code><\/p>\n
\nposition: absolute;
\nwidth: 100%;
\nheight: 100%;
\ntop: 0;
\nmargin: 0;
\npadding: 0;
\n}<\/p>\n