{"id":132,"date":"2013-02-24T15:20:36","date_gmt":"2013-02-24T14:20:36","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=132"},"modified":"2013-04-14T17:34:58","modified_gmt":"2013-04-14T15:34:58","slug":"responsive-iframe-und-video-elemente","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/24\/responsive-iframe-und-video-elemente\/","title":{"rendered":"Responsive iframe- und video-Elemente"},"content":{"rendered":"

Beim Einbetten von Videos innerhalb von iframe<\/code>– oder video<\/code>-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Gr\u00f6\u00dfenver\u00e4nderung ihres Containerelements. Obwohl die Breite des iframe<\/code>’s mittels der Css-Eigenschaft max-width<\/code> auf 100% gesetzt werden kann, ist davon nicht dessen H\u00f6he betroffen.<\/p>\n

Um dieses Problem zu beheben, gibt es einen einfachen Trick: Um das betreffende iframe<\/code> oder video<\/code> wird ein Wrapper-Element eingef\u00fcgt.<\/p>\n

<div class=\"video-wrapper\">\r\n\t<iframe width=\"560\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/T0ezIRTeIUY\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n<\/div><\/code><\/pre>\n
Das allein reicht nat\u00fcrlich noch nicht aus. Um das gew\u00fcnschte Verhalten zu erreichen, wird noch ein wenig Css ben\u00f6tigt.<\/p>\n
.video-wrapper {\r\n\tposition: relative;\r\n\t\/* padding-top je nach Video-Format *\/\r\n\tpadding-top: 56.25%; \/* entspricht 16:9 *\/\r\n}\r\n\r\n\t.video-wrapper iframe {\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t}<\/code><\/pre>\n
Erkl\u00e4rung<\/h3>\n
Es wird eine Box erstellt, die je nach padding-top<\/code> ein bestimmtes Format besitzt. In dieser Box wird das iframe<\/code>– oder video<\/code>-Element positioniert. Durch die width<\/code>– und height<\/code>-Eigenschaften f\u00fcllt es das Elternelement aus und passt sich dessen Gr\u00f6\u00dfenver\u00e4nderungen an.<\/p>\n
Links<\/h3>\n
Creating Intrinsic Ratios for Video<\/a>
\nFitVid.js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Beim Einbetten von Videos innerhalb von iframe– oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Gr\u00f6\u00dfenver\u00e4nderung ihres Containerelements. Obwohl die Breite des iframe’s mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen H\u00f6he betroffen. Um dieses Problem zu beheben, gibt es einen einfachen Trick: Um das […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77],"tags":[34,36,35],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-28","jetpack-related-posts":[{"id":308,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/06\/12\/einzelne-youtube-videos-automatisch-und-in-endlosschleife-abspielen\/","url_meta":{"origin":132,"position":0},"title":"Einzelne YouTube-Videos automatisch und in Endlosschleife abspielen","author":"Paul-Christian Abla\u00df","date":"12. Juni 2013","format":false,"excerpt":"Um YouTube-Videos automatisch abzuspielen, gen\u00fcgt es de folgenden Parameter an die Video-Url anzuh\u00e4ngen: autoplay=1 Zum Wiederholen in Endlosschleife wird folgender Parameter angeh\u00e4ngt: loop=1 Aber Achtung, mittels iframe-eingebettete Videos ben\u00f6tigen zus\u00e4tzlich noch den playlist-Parameter, da der loop-Parameter nicht hinl\u00e4nglich unterst\u00fctzt wird. Sollte also als Einbettungsmethode das iframe gew\u00e4hlt sein, muss folgendes\u2026","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/allgemein\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":584,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/03\/20\/lesetipp-ein-zwischenstand-zu-responsive-images\/","url_meta":{"origin":132,"position":1},"title":"Lesetipp: Ein Zwischenstand zu responsive images","author":"Paul-Christian Abla\u00df","date":"20. M\u00e4rz 2014","format":false,"excerpt":"A Q&A on the Picture Element ist ein guter Ausgangspunkt, um sich auf den aktuellen Stand der Entwicklung bei responsives images zu bringen. Zum einen wird ein kurzer Abriss des bisherigen Entwicklungsprozesses gegeben und zum anderen bietet der Artikel genug Links und Schlagworte f\u00fcr eine vertiefende Recherche. Die momentan\u2122 angestrebte\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":485,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/16\/maskierungszeichen-in-css\/","url_meta":{"origin":132,"position":2},"title":"Maskierungszeichen in Css","author":"Paul-Christian Abla\u00df","date":"16. Januar 2014","format":false,"excerpt":"Gelegentlich besteht die Notwendigkeit, bestimmte Zeichen(folgen) in Css zu maskieren, um zu verhindern dass sie gem\u00e4\u00df ihres urspr\u00fcnglichen Einsatzzweckes ausgef\u00fchrt werden. Beispielsweise, wenn gr\u00f6\u00dfere Codebl\u00f6cke mit dazugeh\u00f6rigen Kommentaren auskommentiert werden sollen: \/* Auskommentierung .extended_subnav { width: 211px; position: absolute; z-index: 10; right: 0; \/* Analog zum padding-right von .mod_subnav *\/\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":281,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/25\/lesetipp-magic-numbers-in-css\/","url_meta":{"origin":132,"position":3},"title":"Lesetipp: Magic Numbers in CSS","author":"Paul-Christian Abla\u00df","date":"25. April 2013","format":false,"excerpt":"Als Nicht-Informatiker kannte ich den Begriff der magischen Zahl bisher nicht, wohl aber das Problem: Bestimmte Zahlenwerte, die nur in Browser A mit Schriftgr\u00f6\u00dfe B, Schriftart C und Zoomstufe D funktionieren. Sei es top: 42px;, um ein Flyout-Men\u00fc haargenau unterhalb des Schriftzuges seines Elternelements zu positionieren oder auch letter-spacing: -4px;\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":451,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/28\/os-x-10-8-4-firefox-24-und-die-scrollbars-in-der-responsive-design-view\/","url_meta":{"origin":132,"position":4},"title":"OS X 10.8.4, Firefox 24 und die Scrollbars in der Responsive Design View","author":"Paul-Christian Abla\u00df","date":"28. September 2013","format":false,"excerpt":"Als ich am vergangenen Dienstag den frisch auf Version 24 aktualisierten Firefox benutze und mich daran machte, mein aktuelles Projekt in der Responsive Design View zu bearbeiten, wunderte ich mich etwas: Zuvor nebeneinander flie\u00dfende Elemente brachen mit einem Mal um. Beim Blick in das Layout-Fenster vom Firebug fiel mir auf,\u2026","rel":"","context":"In "Browser"","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":286,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/05\/img-elemente-mit-inset-box-shadow-stylen-ein-workaround\/","url_meta":{"origin":132,"position":5},"title":"img-Elemente mit inset box-shadow stylen- ein Workaround","author":"Paul-Christian Abla\u00df","date":"5. Mai 2013","format":false,"excerpt":"[Editors Note: Es gibt eine Demo box-shadow inset f\u00fcr img-Elemente] In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen\u2013 et voil\u00e0, die Sache\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/132"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":10,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/132\/revisions\/246"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}