I’ve successfully uploaded an HTML5 video which is 480 x 270. I would like to adjust the frame it plays in to that dimension (or smaller). I have set Native Video Width and Height to those dimensions and I can see when the page loads it starts at that size and then jumps to a larger frame. Image Renditions only has Thumbnails and Photos but no video frame size. I have set a one pixel border so I can see the overall frame it plays in.
Charles
maybe try setting the max-width to its lowest value (960px)?
I’ve tried that. It doesn’t do anything because it doesn’t go below 920px which is pretty wide. Not sure why it’s built that way. Gutters makes it a bit smaller but it’s not an overall dimension so it’s not very accurate.
Custom css might do it. Can you post a link to the page?
OK I’ve put together an experiment. I have saved two sizes of the video:
goats 2022-06-28 Goats Running Up That Hill - CEI Photography
goats 2 Goats 2 Running Up That Hill - CEI Photography
I created two Pangolin Theater Albums and set the Native Video Width and Height to 480 x 270 for the first one and 200 x 250 for the second one (for some reason 200 is the smallest width available). As you can see there is no difference in the way the two pages are being displayed. The frame that the videos are in is exactly the same size - based on what, I’m not sure. You can see the quality of the second one is terrible because it’s being displayed at the wrong size.
Both of the Albums are using the same Album Set and Page Template and the same Top-level Set. The page width is set to 1920 in these. The Top-level page width will make the frame smaller but it will also make the entire page smaller including the title graphic in the header. The gutter sliders will also make the frame width smaller, but not the height (which is what gutters are supposed to do).
I’m OK with using CSS if I have to, but I wonder why there isn’t an adjustment for the size of the video frame the way there is for thumbnails and photos.
try this in your custom css. It sets the gallery with to the same width as the video:
.album-template-identifier-zoo-theater-album .the__gallery > .content {
max-width: 480px;
}
this part: .album-template-identifier-zoo-theater-album makes it so the gallery width setting applies only to albums that use that particular album template
I’m guessing the gallery width is intended to take care of that. It serves the same purpose in a normal album’s thumbnail display: restricting the width of the area that the thumbnails are displayed in.
The CSS works, thanks. Where is the Gallery width? If you mean the Top-level set Gallery there’s no width (that I can find) in there.
It’s in the album template, under the Presentation tab
That setting only goes as low as 920px, that’s why custom css is needed. In the browser inspector, I found this:
Got it, thanks. Not sure why Matt designed the slider with a limited Max-width.
Because the options are mostly designed with consideration to embedded YouTube videos, which are never as small as that. Plus the FitVids JS, that responsively expands video to the size of its container.
I’ve reduced the minimum value for this slider; will be in our next update.
That’s great. Thanks Matt. I guess not many people are using the HTML5 option but I love it. For short video clips it works really well. The problem I was having was the height of the videos. They won’t fit on a laptop screen without scrolling up and down. Of course YouTube videos don’t do that but I think they conform everything to one set of dimensions.