Markup proposal: do videos like the new quotes.

Markup proposal: do videos like the new quotes. Started by Antechinus · May 04, 2022, 05:07:28 pm · Read 35353 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Markup proposal: do videos like the new quotes.

May 04, 2022, 05:07:28 pm

Same idea: simplify things by wrapping the header inside the video tag itself.

At the moment you have the header tag outside the video tag, so when it comes to controlling width you have two tags to deal with.

At the moment, on a wide screen, having the link for the video full width, even when the video itself is only a fraction of that width, is a bit of a UX nuisance sometimes.

IMO it would make sense to rearrange things so you only have one tag to deal with.

(Incidentally, I'm also thinking a BBC float tag and/or flexbox tag could be handy too. Allow images and videos to stack side by side when there is enough room.)

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

Reply #1 – May 04, 2022, 07:10:38 pm

That video tag markup has always been .. umm .. less than ideal, and it actually got some 2.0 cleanup! I'll take a look at moving the header inside the tag and see if that cleans things up.

I like the idea of being able to stack videos side by side, that could look pretty cool on wide screens. Maybe something with a tag attribute could work, but right now most (I think) users just plop the link in place and let the system do "its magic" of auto embedding. Maybe some CSS magic with child or sibling could work, or may need some JS.

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

Reply #2 – May 04, 2022, 10:43:00 pm

All it really needs is something like what I whipped up for a phpBB site. It was just a basic BBC tag of one div, with a class name for CSS convenience. Then the CSS essentially just said:

Code: [Select]

.whatever >img {display: inline-block;}

That was for making inline attachment images sit in a row if there was enough space. Simple, and works well. You just add the tag for the div manually and then throw in your attachments.

Can't see why it wouldn't work with videos too (must admit haven't tried it yet). Or you could use flexbox for the div, with flex-wrap set to wrap and flex-grow set to 0 on the child elements. That should work too.

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

Reply #3 – May 06, 2022, 10:38:42 am

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

Code: [Select]

<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.

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

Reply #4 – May 06, 2022, 02:20:03 pm

Sidenote, I don't know how the aspect ratio of a video is currently determined but CSS has an aspect-ratio attribute now.

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

Reply #5 – May 06, 2022, 03:29:49 pm

Good point on the aspect ratio, I think its backed in as a 16x9, so not sure how it will react to others.

I made some preliminary changes to the CSS and mostly the JS to try and account for the issues I attempted to outline above. Actually found a few things to optimize so that was good.

On a wide screen the below should stack side by side, narrow the screen its top to bottom. I believe I have it set to a 1440 wide viewport before it side X side stacks, that could be made smaller as well, just a starting point. There are also distinct break points, its not a continuous responsive view.

Here are two random video links separated by a newline, the JS should detect they are both video links and "handle" (e.g. consume) the br. Be sure to flush your browser cache so you get the new JS/CSS.

https://www.youtube.com/watch?v=lxdFh8nYMgM
https://www.youtube.com/watch?v=WgdABWxoAB4

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

Reply #6 – May 06, 2022, 05:09:37 pm

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.

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

Reply #7 – May 06, 2022, 05:21:39 pm

I really tried to do just that, but I could not get it to be fully responsive. Even tried flexbox but got the same results.

I could get the initial side by side with just the preview images to work fine, but once you clicked on one of the images, and the iframe loaded, things got a wonky and the frame would collapse to a postage stamp size (w/o having a set width). I would much prefer for them to just take care of themselves and not have the darn break points.

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

Reply #8 – May 06, 2022, 05:56:25 pm

Ok, so why can't you just set a width on the iframe that is taken from the video size, and with a max-width set to 100%?

That way they should stack automatically if the available width is less than two frame widths, and the frame/vids should still scale down if available width is less than one frame width.

I still can't see why you need break points at all.

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

Reply #9 – May 06, 2022, 07:05:47 pm

There is a width/height on the iframe tag ... it just seems inline-block does not honor it and just collapses to some minimal size. The only way I could work around that was to set that width on the div when the screen was wide enough to warrant the side by side view. I tried flex and inline flex as well but was having some of the same issues, left me perplexed!

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

Reply #10 – May 06, 2022, 07:10:16 pm

Ok, that is very strange. I'm sure there will be a way around it that doesn't involve spaghetti.

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

Reply #11 – May 06, 2022, 07:55:26 pm

Agreed ... If you find the sauce, please share!

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

Reply #12 – May 06, 2022, 08:11:25 pm

Lol. Got it working in about 30 seconds just by swearing and disabling one thing after another in the document inspector. Told you you were overthinking it.

Code: [Select]

/* Video / Preview container */
.elk_video {
/*	position: relative;
	height: 0;
	padding-bottom: min(480px, 75%);*/
}

.elk_video iframe {
/*	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;*/
	margin: 0 auto;
	border: none;
}

.elk_video_preview {
	display: block;
	width: 100%;
/*	margin: 0 auto;*/
}

/* 1440px */
@media screen and (min-width: 90em) {
	.elk_video_container {
		display: inline-block;
		vertical-align: top;
/*		min-width: 575px;
		width: 49%;*/
		margin: 0 2px 1em 2px;
	}
}

/* 1760px */
@media screen and (min-width: 110em) {
/*	.elk_video_container {
		min-width: 675px;
	}

	.elk_video {
		padding-bottom: min(600px, 75%);
	}*/
}

/* 2175 */
@media screen and (min-width: 145em) {
/*	.elk_video_container {
		min-width: 800px;
	}*/
}

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

Reply #13 – May 06, 2022, 10:12:52 pm

Only thing I notice is that the video is not responsive when you shrink the window, it simply overflows once the screen gets to small.

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

Reply #14 – May 06, 2022, 10:56:16 pm

Code: [Select]

.elk_video_container {
		max-width: 100%;
}