Video elements not filling container

[ollytom]

Video dashboard elements do not fill their container when rendered. Maybe something to do with default padding or margin?

Need to investigate with browser inspector.

[ollytom]

Unlike all other dashboard elements, you can't click anywhere on a video element to select it in the editor. That's because the video HTML element exposes controls that are meant to be able to be clicked.

The simplest thing I could think of at the time was to create a user-selectable area by shrink the video to 90% size of its parent container.

<video
    style="width: 90%; height: 90%"
    ref={videoRef}
    src={options.source}
></video>

Other ways around this I can think of:

• pass a prop to the component so that it knows when it is invoked from the editor or viewer page. If called from the editor, disable controls and use an inline style user-select: none;.
• Use CSS to apply the user-select: none style to video elements which are children of the dashboard-wrap class (i.e. the class applied to the dashboard in editor mode)

Because this is the only dashboard element with this problem, and it's a relatively rarely used element, that single style attribute style="width: 90%; height: 90%" has stuck.

For now I'll remove this from the v3 milestone as I don't think it's a real show-stopper.

[sol1-matt]

video currently working in the same way as v2 meerkat