1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

MG 1.1 Make gallery BBcode embed full-width ?

Discussion in 'Media Gallery Support' started by Optic, Dec 12, 2015.

  1. Optic

    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?
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
    Optic likes this.
  3. Optic

    Optic Well-Known Member

    Thanks, found it in the xengallery_bb_code_tag_gallery_media template. (y)
     
    Chris D likes this.
  4. Håkan Olsson

    Håkan Olsson Member

    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.jpg
     
  5. Chris D

    Chris D XenForo Developer Staff Member

    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: Apr 29, 2016
  6. Håkan Olsson

    Håkan Olsson Member

    Ok perfect, I'll go and buy it.

    /Thanks
     
  7. Håkan Olsson

    Håkan Olsson Member

    Hi Chris,

    I guess I should be all set now. XFMG purchase went through without any friction 15 min ago.

    /Håkan
     
  8. Håkan Olsson

    Håkan Olsson Member

    Chris, could you update this -- I still need directions.

    /Thanks
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    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;
    }
    
     
  10. Håkan Olsson

    Håkan Olsson Member

    Nice,

    I'll give it a try.

    /Thanks
     
  11. Håkan Olsson

    Håkan Olsson Member

    I forgot to say yes that was easy. I added a max-width to it and it works like a dream.

    Thank you!
     
    Chris D likes this.

Share This Page