MG 1.1 Make gallery BBcode embed full-width ?

Optic

Well-known member
When using the Share BB [GALLERY] Code inside a forum post, it seems the size of the embedded video/player is stuck on 500x300 px.

Is it possible to increase the size to full width size just like when you're viewing the original item in XFMG?
 
Yes. You should just identify the CSS classes responsible, search for those in the templates and either edit those templates directly or add code in EXTRA.css to override it.

Should be easy enough to identify.
 
Hi,

I tried the "xengallery_bb_code_tag_gallery_media" mentioned above, entered width="960" height="540" (16:9). It works, videos are displayed bigger but...

Two things:

1. For uploaded videos embeded in threads -- the responsiveness of the video seems to work only up to a point (up to 711 x 400 I think). My goal is to embed and display bigger than that e.g., like in Media Gallery where they are displayed in an unlimited size.

2. Videos show up with pillarbox/letterbox (See attachment .jpg)

(I don't have MG yet so I tried this with the 3-days demo.)


I guess I need some hints where to go, or perhaps you can improve it? :)

/Thanks

bars.webp
 
I can confirm it is possible to have the videos full width, and resize responsively whilst maintaining the aspect ratio. You can actually see a similar thing when you view the video in the gallery itself, e.g. here:
https://xenforo.com/community/media/dadparvar.1056/

This video is full width, but maintains a 16:9 ratio when resized.

However, support can only be provided to licensed customers and support is not provided for demo installs - it's possible. If you go down the route of purchasing XFMG then I can point you in the right direction so you can adjust this to get a similar effect in threads, too.
 
Last edited:
I apologise, I missed your message on Friday.

The easiest solution is to add the following to your EXTRA.css template:

Code:
.Responsive.GalleryLazyLoader .galleryBbCode .mediaContainer .videoContainer
{
    position: relative;
    padding-bottom: 56.25%;
    height: 0; overflow: hidden;
    margin-bottom: 10px;
}

.Responsive.GalleryLazyLoader .galleryBbCode .mediaContainer .video-js
{
    @property "mediaViewVideo";
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @property "/mediaViewVideo";
    top: 1px;
}

.Responsive.GalleryLazyLoader .galleryBbCode .mediaContainer .video-js
{
    width: 100%!important;
    height: 100%!important;
    max-width: 100%!important;
    max-height: 100%!important;
}

.Responsive.GalleryLazyLoader .galleryBbCode .Panes
{
    max-height: inherit;
}
 
Top Bottom