XF 2.3 Video on page

[Seeker-Smith]

How do you folks handle the sizing of videos from desktop and mobile?

I'm using this code which is fine for desktop but mobile not so much.

<p align="center">
<video width="640" height="480" controls>
<source src="/public/01b.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</p>

 

[zenvibe]

The issue is the fixed width="640" height="480" attributes on your video tag. Those are absolute pixel values, so on mobile screens smaller than 640px wide, the video overflows.

Replace your code with this responsive version:

<p align="center">
<video style="width: 100%; max-width: 640px; height: auto;" controls>
<source src="/public/01b.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</p>

The key changes:

• width: 100% makes it fill the available container on small screens
• max-width: 640px caps it at 640px on larger screens so it doesn't stretch too wide
• height: auto keeps the aspect ratio correct automatically

This way it'll stay at 640px max on desktop but shrink down to fit on any phone or tablet screen. No CSS file changes needed — it's all inline on the video element itself.

 

[AndyB]

You might like this add-on:

https://xenforo.com/community/resources/video.5701/