Resizeable video canvas

[waldyrious]

In the demo video at the project homepage, it's possible to e.g. resize the text box that appears to demonstrate how to edit the video's subtitle; however, the video's canvas does not change when the content gets larger, so the additional content overflows and gets hidden. Like this:

Some possible solutions:

• Make the video canvas a scrollable container
• Allow the video canvas to be resized, with a handle similar to that of the textarea
• Automatically grow the video canvas so that all content within is visible

[ysulyma]

Thanks for the catch, my preferred solution is to make the textarea not vertically resizable.

[waldyrious]

I don't think that would fix the root problem, since the textarea element just happens to be included in this particular video; if someone authors a video whose contents, when rendered, occupy a larger vertical space than the video canvas (which may be out of the control of the video author, e.g. it could be due to missing fonts in the client, or different zoom levels applied by the user, etc.), the same problem would reappear.

[ysulyma]

As much as possible, we try to mimic the behavior of real mp4 videos, which can't be scrolled. For this reason, it's intentionally not possible for viewers to zoom text in videos. Video authors who want scrollable videos can override this behavior with custom CSS (and perhaps adjust the viewport meta tag).

[waldyrious]

Oh, don't get me wrong — I understand and fully agree that scrollable video would be awkward and undesirable. Maybe by mentioning that as the first of the three possible solutions above, it gave that idea undue weight in the following discussion. To be clear, I certainly wouldn't like that solution (even though I still think it's better than just cropping the content with no way to access the overflow).

But I'd hope that such a dynamic and innovative media format would allow room for breaking the mold a bit in terms of the dimensions and proportions of the video canvas, and making them a bit more responsive to the rich content within. This is especially important since the videos are not only dynamic, but interactive, i.e. they can respond to user input. This would correspond to the third solution I proposed in the opening comment, i.e. "automatically grow the video canvas so that all content within is visible", or alternatively, allowing video authors to manually specify unconventional (and possibly dynamic) dimensions for the video.

As a consumer of such content, I'd much rather have a video with an aspect ratio that fits the content, than have content being cropped out and made inaccessible.

If keeping the aspect ratio of the typical video (which itself has changed over time, btw — I remember when most videos were in 4:3) is important, perhaps the usual approach of adding black bars to the top/bottom or the sides of the content might work. But honestly, I think this would be catering to the current shape of videos, without much real benefit to the user. I mean, people have adapted pretty well to square ratio of media in Instagram, or to vertical videos in YouTube, both of which break the mold of the typical landscape rectangle that most videos are in.

[ysulyma]

The default aspect ratio is 16/10, but you can adjust it with CSS variables: https://liqvidjs.org/docs/reference/css. If you embed the video using an iframe with a different aspect ratio, it does add black bars on the top/bottom or left/right as appropriate.

I'm not entirely sure what you mean by growing the video canvas. Typically Liqvid videos are embedded via iframe, just as you would with YouTube videos. (Embedding them directly into a webpage is planned for a future release, maybe 2.2; it turned out to be more complex than I thought.) If you wanted to actually resize the iframe based on stuff happening inside it, you could do so via window.postMessage. In fact, this is how we simulate fullscreen on iOS.

[waldyrious]

Ah, I see, thanks for the clarification. Yeah, I wasn't considering the embedding method. Indeed, using an iframe does make it cumbersome to resize the container dynamically. I would suggest leaving this issue as a speculative/long term proposal for when it's possible to embed videos directly into a webpage, in which case it should be possible to make the container resize dynamically to fit its contents using CSS. WDYT?