Allow responsive Iframes and make sure, Images won't break the layout

dhg / Skeleton

Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

http://www.getskeleton.com

MIT License

19.08k stars 3.15k forks source link

Allow responsive Iframes and make sure, Images won't break the layout #375

Open marcshake opened 6 years ago

marcshake commented 6 years ago

I think, Skeleton is almost perfect. Small, easy to use and everything. But when it comes to use Iframes, you're lost. This non-js-div-solution will allow to use Iframes in a responsive manor. You can even use these fluidMedia-Containers in columns etc.

badcat commented 6 years ago

Nice - does this work with various proportion media such as YouTube's 4:3 vs. 16:9 vs 21:9 and so on?

marcshake commented 6 years ago

Not really - although you might setup several classes for ratios.

.fluidMedia { padding-bottom: 56.25%;

56.25 is nothing else than 9:16 100 - so for 4:3-ratio you might use 75% (3:4100) etc.

But I use a lot of youtube/vimeo-clips at my website (trancefish.de) and the 56.25%-ratio looks great everytime.