Support custom video size in markdown

[oliviertassinari]

Problem

Since https://github.blog/2021-05-13-video-uploads-available-github/ we can upload and embed videos in markdown. This is great, but I have found it unusable in practice. On any macOS device, the device pixel ratio is 2. This is something that GitHub handles well for images, it's able to detect the device pixel ratio and apply the right dimensions.

For example, it renders like this ✅ (1:1 scale, and no blur)

<img width="426" alt="Screenshot 2022-07-30 at 16 34 17" src="https://user-images.githubusercontent.com/3165635/181919084-a166d0cd-a3d4-4693-a37a-b6aadd028390.png">

and not, like this ❌ (too big + blurry)

![](https://user-images.githubusercontent.com/3165635/181919084-a166d0cd-a3d4-4693-a37a-b6aadd028390.png)

But for video it doesn't work:

Screen.Recording.2022-07-30.at.16.35.36.mov

https://user-images.githubusercontent.com/3165635/181919180-3e5970ea-96c2-4ded-8ba9-c3900ebb97a4.mov

In practice, it means that in releases like this one https://github.com/mui/mui-x/releases/tag/v5.15.0, the videos look strange. I think that it would feel better with a 1:1 scale. If we want high-quality rendering, we are forced to rely on .gif, like it's done by GitHub in https://github.blog/2021-05-13-video-uploads-available-github/#and-upload-your-video-from-anywhere

hoping the gif file size won't be too large:

<img width="430" src="https://user-images.githubusercontent.com/3165635/181920799-159f16a9-0de3-4de4-aec9-6d82860c43f4.gif" />

Generated with

brew install ffmpeg
brew install gifsicle
ffmpeg -i Screen\ Recording\ 2022-07-30\ at\ 16.35.36.mov -vf "fps=30,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output.gif && gifsicle -O3 output.gif -o output.gif

Solution

1. Please detect automatically the device pixel ratio (set the right width)
2. Please make it possible to set custom video width.

[raine]

The gif UI is much nicer. Videos get that annoying title bar for filename.

[oliviertassinari]

I have found a workaround for this. I now always record my videos to match the width of GitHub's UI 😅. It works e.g. mui/mui-x#9528 (comment). Now, to be careful, the width is different between issues views (807px) and discussions views (893px).

[oliviertassinari]

Same bug but for images https://github.com/orgs/community/discussions/74738

[mootari]

Just blowing the dust off this thread, I don't have anything new to add otherwise. As far as I can tell there are no (reasonable) workarounds.

The problem that I often run into is that the inlined video takes up way too much space in an issue description, drowning out other information. In that case some alternatives are to wrap it in a <details> element (i.e., hide it by default) or don't embed it in the first place and just link to the attachment.