Re: Markup proposal: do videos like the new quotes.
Reply #3 –
So far my attempts at this indicate its more complicated than I thought.
The markup is put in place via JS, so its easy enough to make it what we want. Stacking them side by side is also not difficult, inline-block or flex work fine. Just for testing I set them up like
<div class=video_container>
<div class=video_header>holds the link to the video and the collapse button</div>
<div class=video>Hold the preview image or the iframe</div>
</div>
Note the way the JS currently works, is that it expects the video links to be alone so link link will not currently work, again easy change. I'm not sure why it was done that way, maybe to allow folks to add a link in a sentence w/o it auto embedding.
You can't do link newline link since the JS runs post bbc parser and you will end up with a BR tag between the two links. One could use the JS function to traverse the DOM and look for that condition as well, but starting to get more involved.
What has been difficult is keeping the embeds fully responsive. Today when you embed a vid, it will resize as you shrink the window. It uses a padding / height trick to accomplish that.
Once stacked side X side its unruly, especially if you have a video playing in one iframe div and just preview image in the other. The only solution I've found is to place a definitive px width on them when stacked which will then require some media queries to go back to a % when the screen narrows.