embedresponsively.com zresponzivní i nezresponzivnitelné

Responzivní, tedy velikosti obrazovky přizpůsobivý web je dnes samozřejmostí (i když výjimky jsou povoleny). Základem jsou správně napsané CSS pro správně poskládané HTML. Jsou ale elementy, které standardním HTML konstrukcím a CSS definicím odolávají. Těmi jsou hlavně vložené (embed) externí kódy s elementem iframe. S jejích zvládnutím vám pomůže embedresponsively.com. Vygeneruje vám kód pro YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Vine, Getty Images a pár dalších služeb. Princip je celkem jednoduchý a určitě se jím dá inspirovat obecně.

A jak to vypadá? Například pro ukázkové YouTube video http://youtube.com/watch?v=QILiHiTD3uc, které je Blogger vloží takto...

...vygeneruje embedresponsively.com kód...

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>


...což vypadá takto...

Ono to tu tak úplně nevyzní, ale v reálu se to jeví velmi zajímavě! :-)