Increase frame size of embedded videos, allow full screen

[Kradyz]

A proposed change to the <iframe> of embedded videos in order to improve the browser experience.

This change will:

• Allow full-screen
• Center the frame
• Make the frame larger

Example implementation: https://mander.xyz/post/533860

Fixes #926

[hanubeki]

Your example doesn't fit in mobile screen, maybe try max-width: 85vw or something

[Kradyz]

Your example doesn't fit in mobile screen, maybe try max-width: 0.85vw or something

Thank you @hanubeki! I have tested and commited that change, and it is reflected by the example (https://mander.xyz/post/533860).

Do you know how to re-scale the height appropriately when max-width comes into play in order to keep the aspect ratio? The way it is now, in the phone you can see black bands on the top and bottom of the video because the height is not re-scaled. It is not as bad as before - quite an improvement already.

I have tried setting the width and height in relative rather than absolute terms, but since the phone and browser screens contain different elements, a relative size for the browser looks very small on a cellphone. That is why I have so far chosen to use the absolute pixel units.

EDIT: I have found out how. We can use "aspect-ratio:16/9" instead of explicitly setting the height.

[dessalines]

Do not hardcode widths or aspect ratios like this. Use bootstrap classes made for iframes: https://getbootstrap.com/docs/5.3/helpers/ratio/#example

[cloventt]

FYI the feature you linked appears to be new in Bootstrap v5. As the UI is still using bootstrap v4 the .ratio helper is not available yet.

[daviessm]

@jsit is working on Bootstrap 5: #1378

[cloventt]

I have opened a PR following the recommended approach #1437