Skip to main content ↑ ↓
Markup proposal: do videos like the new quotes. Started by Antechinus · · Read 14785 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Re: Markup proposal: do videos like the new quotes.

Reply #15 –

Quote from: Antechinus – I get the impression you are overthinking this. :)

There should be no need for break points or set widths or anything else. Just make the damned thing responsive. Let them embed at their natural sizes. Set a max-width of 100% of the post parent (already standard, for yonks). Set them to inline-block so they sit side by side if there is space, or stack down the page if they run out of width.

Stop trying to be bloody Procrustes. Just let them work by themselves. :D
Difficult to do with iframes. But since last year you can just say aspect-ratio: 16 / 9 combined with width: 100% and it'll Just Work™.

Re: Markup proposal: do videos like the new quotes.

Reply #16 –

Quote from: Antechinus –
Code: [Select]
.elk_video_container {
		max-width: 100%;
}
That does not work either, it still overflows as the iframe is not responsive ... plus on a less wide screen you are left with a ginormous video embed, takes up too much room.
Quote from: Frenzie –
Quote from: Antechinus – I get the impression you are overthinking this. :)

There should be no need for break points or set widths or anything else. Just make the damned thing responsive. Let them embed at their natural sizes. Set a max-width of 100% of the post parent (already standard, for yonks). Set them to inline-block so they sit side by side if there is space, or stack down the page if they run out of width.

Stop trying to be bloody Procrustes. Just let them work by themselves. :D
Difficult to do with iframes. But since last year you can just say aspect-ratio: 16 / 9 combined with width: 100% and it'll Just Work™.
Now we are talking, @Frenzie comes to the rescue!.  I read up a bit on the aspect-ratio rule and they discuss how it helps combat the iframe problem (what we used to do was a 16/9 or 4/3 padding trick, but that stopped working when things were inline-blocked).  So I played around a bit with aspect-ratio and I'm:thinking:it may be working now.