Skeleton icon indicating copy to clipboard operation
Skeleton copied to clipboard

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

Open marcshake opened this issue 7 years ago • 2 comments

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.

marcshake avatar Jul 11 '18 08:07 marcshake

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

badcat avatar Jul 12 '18 13:07 badcat

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:4*100) etc.

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

marcshake avatar Jul 12 '18 15:07 marcshake