Change video prop shape: remove width and height, and make src optional

See also ✨ Add a Video prop type to the Code Component editor Active

wim leers → made their first commit to this issue’s fork.

• We currently never populate width and height, because Drupal doesn't currently have a way to determine the intrinsic dimensions of a video file. Therefore, @lauriii suggested that we remove these properties from the schema definition until such time as we're able to populate them. Otherwise, it will cause confusion to component authors. Furthermore, it's not even clear how high a priority it will be for us to add these properties back in: it might be a while before that's worth putting effort into. There's less value in telling the browser the intrinsic dimensions of a video than there is for images.

🤔 These values are almost equally valuable for <video> as it is for <img>: without width and height, layout shift would occur, unless the width and height are explicitly specified by either the component author (i.e. hardcoded in the component) or the content author (if the component allows the content author to pick it).

Yes, that means that Drupal's local video support actually guarantees that this layout shift would occur, because the \Drupal\media\Plugin\media\Source\VideoFile media source does not have the ability to provide this metadata.

The way that Drupal core bypasses this: it doesn't allow content authors to select width/height; it enforces a single width/height at the field formatter level when displaying VideoFile-sourced Media: 🐛 Video files using the FileVideoFormatter have a fixed dimension Fixed .

That being said: it is unlikely for there to be many videos on a page, but many images. So the impact of width/height not being specified (and hence being blocked on the video loading for final layout to be determined by the browser) is smaller.

So: removing width and height as requested.

• src is currently required, but there's a use-case when that's not wanted: for setting an example value (to be used in XB as a default/initial value), it would be nice to be able to set a poster image only, without needing to provide a video file as well.

This poses multiple interesting new challenges:

I think a way is to use minProperties (which will only work if 1 out of N properties need to be populated, and it doesn't matter which one, which is what the issue summary proposes).

But:

1. zero examples of this exist in *.component.yml files in core
2. XB's shape matching infrastructure does not (yet) know how to deal with this
3. … and most importantly: it's not a concept that AFAICT exists at all in core, so it'll be very hard to map it onto matching against existing field instances (aka DynamicPropSources, aka what we'll need for ContentTemplates)

Point 2 in the issue summary/#6 appears to be requested only to make it simpler to allow a client-side generated poster in ✨ Add a Video prop type to the Code Component editor Active , which is a reasonable goal.

1. Have JS generate a single-frame video instead, and point src to that. Possible with FFmpeg as a worker (see e.g. https://gist.github.com/ilblog/5fa2914e0ad666bbb85745dbf4b3f106), but that's far too heavy a burden.
2. Simply populate src with a known example.com URL (so: safe) and have the code component handle that in a special way (if it chooses).

   I tried it, and this:

   <video controls width="150" src="http://example.com/example.mp4" poster="https://www.drupal.org/files/styles/grid-2-2x-square/public/default-avatar.png?itok=pCwA0iJh"/>
   </video>
   

   loads just fine:
   

So, narrowing scope, because the purpose here was to unblock ✨ Add a Video prop type to the Code Component editor Active , and that's been achieved 👍

wim leers → credited balintbrews → .

wim leers → credited lauriii → .

In discussion with @lauriii and @balintbrews, we realized a few things:

Reflecting in issue credit 😊