X3Photo Gallery Forums

JMM · 10 Mar 2024, 06:04

Hello, Karl,

I have created a test folder HERE, containing six MP4 videos, and all videos are hidden except for 1 video.

At the top, the 6 items displayed are by way of that gallery's Content tab. The following is an example of my code on that Content tab (I'm showing here the code for just 1 video, and have omitted here the code for the other 5 videos, for brevity):

<div  class=" jmmdivex2">
    <center>
        <!-- Evenly adjust content within a block-grid -->
        <!-- Read more: http://foundation.zurb.com/sites/docs/v/5.5.3/components/block_grid.html -->
        <ul class='small-block-grid-1 medium-block-grid-2 large-block-grid-3'>
<!-- Sample Videos _ Dummy Videos For Demo Use -->
<li>
<div>
<video class="x3-style-frame" preload="metadata" controls controlslist="nodownload noplaybackrate" width="100%" loop>
<source src="{{path}}Sample Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</li>
        </ul>
    </center>
</div>

I am happy with the way all 7 videos are displayed on the page, with the white border around each video.

And I am also happy with the way there is that white border displayed when any of those videos are played on that page.

However, when you expand any of those playing videos to full-screen, there is a white border around the full-screen video.

Is there any way, maybe not site-wide but for that specific folder, that I can trick X3 into displaying a black border around any full-screen videos?

In browsing the forums here maybe one or more years ago, I seem to recall that maybe someone else had asked that question, but I am now not able to find that post, so I cannot find what your answer to them was.

Thank you in advance & have yourself a good evening.

Regards,
John

JMM · 10 Mar 2024, 06:05

<div  class=" jmmdivex2">
    <center>
        <!-- Evenly adjust content within a block-grid -->
        <!-- Read more: http://foundation.zurb.com/sites/docs/v/5.5.3/components/block_grid.html -->
        <ul class='small-block-grid-1 medium-block-grid-2 large-block-grid-3'>
<!-- Sample Videos _ Dummy Videos For Demo Use -->
<li>
<div>
<video class="x3-style-frame" preload="metadata" controls controlslist="nodownload noplaybackrate" width="100%" loop>
<source src="{{path}}Sample Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</li>
        </ul>
    </center>
</div>

10 Mar 2024, 23:19

Do you have a link for me? Are we speaking of the browser-native video fullscreen feature? Browsers do apply some CSS here, but I need to be sure of exactly what we are talking, and if it can be changed.

JMM · 11 Mar 2024, 05:31

mjau-mjau wrote: Do you have a link for me?

Yes, the link was at the very beginning of my post, in the first sentence, and again HERE.

And apologies for the 2nd item where the code is duplicated.

mjau-mjau:

Are we speaking of the browser-native video fullscreen feature?

For each of the 7 videos displayed on that page, each video's associated controls in the lower-right corner, (in Chrome-based browsers) between the volume/mute button & the 3 vertical dots for more options... I was refering to when you click on the middle squarish button to expand the video to full-screen.

I just noticed that in Firefox, that expand-to-full-screen-button is located in the lower-right corner to the right of the volume-mute button.

Sorry for the confusion.

11 Mar 2024, 23:33

I think you can do something like this in Settings > Custom > Custom CSS:

video.x3-style-frame:fullscreen {
    background: black;
    border: none;
}

This is the native browser fullscreen, and can be styled with the ':fullscreen' pseudo selector.

To be fair, you could also have added the "x3-style-frame" class on a parent select <div class="x3-style-frame"><video>, because when adding it directly on the <video> tag, it is inheriting the frame and background white also on fullscreen. When moved to a parent element, it won't inherit into the video "fullscreen". However, with the CSS fix above, you might as well keep it like that for maximum control.

Sorry I missed your link!

JMM · 12 Mar 2024, 19:44

mjau-mjau wrote: To be fair, you could also have added the "x3-style-frame" class on a parent select <div class="x3-style-frame"><video>, because when adding it directly on the <video> tag, it is inheriting the frame and background white also on fullscreen. When moved to a parent element, it won't inherit into the video "fullscreen".

I tested this out, by moving the <div class="x3-style-frame"> above the <video>, and it works perfectly, thank you.

I also tried out that Custom CSS code, and it works perfectly, too.

As I only have very few galleries with videos, and the fact that I would like all borders around all videos to be black, for now I went with the Settings > Custom > Custom method, which makes all borders around all videos black, without me having to remember to add <div class="x3-style-frame"> for each video.

Thanks for your suggestions, and have yourself a great day.

Regards,
John

X3Photo Gallery Forums

Can I change the border colour around full-screen videos to be black instead of white?6 posts

Can I change the border colour around full-screen videos to be black instead of white?

Re: Can I change the border colour around full-screen videos to be black instead of white?

Re: Can I change the border colour around full-screen videos to be black instead of white?

Re: Can I change the border colour around full-screen videos to be black instead of white?

Re: Can I change the border colour around full-screen videos to be black instead of white?

Re: Can I change the border colour around full-screen videos to be black instead of white?