Direct link video embed being cutted off

[illusion0001]

What happened?

When embedding a direct link video, it is being cutted off.

Theme version: from branch main as of commit 2632ff6

Expected behavior

Video should be scaled down to fit the display.

Steps to reproduce the behavior

Embed a direct video url: https://storage.googleapis.com/assets-illusion0001/images/TLOU-Nailbomb-Softlock/T1-AC-nailbomb-section-trimmed.mp4

<div align="center" class="responsive-video-container">
<video controls >
  <source src="https://storage.googleapis.com/assets-illusion0001/images/TLOU-Nailbomb-Softlock/T1-AC-nailbomb-section-trimmed.mp4" type="video/mp4">
</video>
</div>

Screenshot

Live site: https://illusion0001.github.io/site-testing/patches/2021/12/04/t1-nailbomb-softlock-patch/

Other

Site repository: https://github.com/illusion0001/site-testing

[mmistakes]

.responsive-video-container has styling to make iframe video content (e.g., YouTube, Vimeo, etc.) responsively size.

You don't need it for a <video> element. Just add width="100%" and it'll work.

<video controls width="100%">
  <source src="https://storage.googleapis.com/assets-illusion0001/images/TLOU-Nailbomb-Softlock/T1-AC-nailbomb-section-trimmed.mp4" type="video/mp4">
</video>

Ref: https://css-tricks.com/fluid-width-video/

[illusion0001]

Thank you!