Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Display video & pictures on a page in a certain order

18 Feb 2022, 21:56

Hello again, Karl,

 I have a page, which includes the following code in Settings | Content, created by the wizard:

Code
<!-- Upload an MP4 video file to your page, and use the code below to embed the video into your content. The {{path}} variable will dynamically convert to the folder path -->
<video width="100%" preload="metadata" controls controlsList="nodownload">
<source src="{{path}}videofilename.mp4" type="video/mp4">
</video>

I have my own video filename listed, of course.

I also have about a dozen pictures included in that folder.

When that page is displayed, it displays the video at the top of the page, followed by the images below.

Question 1:  Is there a way for me to display the images at the top, and the video below the pictures?

Question 2:  The video is small (in dimensions), only 480*784.  I've changed the width to lower resolutions & percentages, and the same for height, but no matter what I've tried, the video on that page displays the full height of my 4K monitor, but if I play the MP4 on my PC, it is only 1/4-th the height of my monitor.  How can I force that video to display on that page in a smaller size?

Thanks in advance.

Regards,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Display video & pictures on a page in a certain order

19 Feb 2022, 01:25

The question is not entirely clear, for two reasons:
JMM wrote:I have a page, which includes the following code in Settings | Content, created by the wizard:
If you added the <video> into content, it means it would display TWICE: Once in the "content" section, and once in the gallery. The exception is if you have HIDDEN the video (clicked the "eye" icon from panel), in which case the video will still display in your content, but not in the gallery.

I assume you must have hidden it? Surely you don't want it twice? Why did you add it directly to content if I may ask? I kinda need to understand this since you are asking to add the video below the gallery section, because that depends.
JMM wrote:Question 2:  The video is small (in dimensions), only 480*784.  I've changed the width to lower resolutions & percentages, and the same for height, but no matter what I've tried, the video on that page displays the full height of my 4K monitor, but if I play the MP4 on my PC, it is only 1/4-th the height of my monitor.  How can I force that video to display on that page in a smaller size?
Videos embedded in websites will not play at exact dimensions of the video. Many reaons for this, amongst others that screen resolutions don't match pixels (for example retina devices), and small mobile screens will have to scale down the video anyway.

Videos are in fact set to consume 100% width of the "container" element originally. This may often scale up or scale down the video slightly. You can add attribute <video width="480" height="784">, but this may not look consistent with the layout since the video will not be the same width as the other content.

So, you can achieve pixel-accurate layout, but I'm not sure it's productive. As you will see on Youtube, the video canvas itself is always one size regardless of the quality that the visitor chooses (240,320,480,720,1080++etc). It affects the quality of course, but it won't scale the video canvas to fit video dimensions.