Search…

X3 Photo Gallery Support Forums

Search…
 
tsommer69
Topic Author
Posts: 10
Joined: 20 Feb 2021, 07:55

Video frame size

06 Mar 2021, 07:05

I've added a couple of old videos, with old bad resolution. When they display, they automatically seem to take up almost the full size of the browser window. Is there a way to control the video playback frame size either on a page level or individual video level?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video frame size

07 Mar 2021, 00:13

Yes, but are you embedding the videos directly into the page? Or opening them in the X3 popup? If you open the videos in the X3 popup (by cliking a link or a preview images), videos will automatically not exceed their original resolution.

If you are embedding directly into the page, there are a few options. Option 1:
Code
<video src="***" style="object-fit:scale-down">
The key above is object-fit:scale-down, which tells the browser to NOT scale the video beyond it's original dimensions. This means, depending on the size of the area the <video> tag consumues, there may be empty space on the sides and/or above and below the video.

Option 2: Set width to match the actual resolution width of the video:
Code
<video src="***" width="320">
Height will adjust automatically.
 
tsommer69
Topic Author
Posts: 10
Joined: 20 Feb 2021, 07:55

Re: Video frame size

07 Mar 2021, 08:50

I was originally embedding directly in page like a picture. How do I do the X3 Popup with preview image? Is that the same as the embed instructions I found. I will evaluate that method too then make a decision.

thanks!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video frame size

07 Mar 2021, 09:30

The popup will display the video without upscaling it, but it won't create and display any "preview image" for you. The popup works from a plain text link ... if you want a preview-image as the link, you would first have to create the preview image in JPG format yourself, because X3 cannot create preview images from videos. Anyway, the popup would work like this:
Code
<a href="/root/path/to/video.mp4" data-popup>Open video</a>
The only reason I mentioned popup in the first place, is because it wasn't clear in your initial post where the video was embedded. If you wanted to create a preview image as the link, it would look like this:
Code
<a href="/root/path/to/video.mp4" data-popup><img src="/root/path/to/preview.jpg"></a>