Announcement

Collapse
No announcement yet.

Simple CSS Fix for Cut Off Portrait Video in vB 5.6.8

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Simple CSS Fix for Cut Off Portrait Video in vB 5.6.8

    Starting vB 5.6.8, video attachments render in HTML Video player but the default size implemented by vB is just tailored for videos in landscape mode. Thus in portrait mode, the video is cut off and the video controls are not visible. Please refer to this post for more details.

    Click image for larger version  Name:	portrait-video.png Views:	233 Size:	73.6 KB ID:	25125

    To fix this issue, add this custom CSS in css_additional template:

    Code:
    /* Portrait Video Fix - START */
    .videocontainer > div {
        aspect-ratio: 16/9;
    }
    
    .videocontainer > div > video {
        max-height: 700px;
    }
    /* Portrait Video Fix - END */
    Click image for larger version  Name:	portrait-video-fix.png Views:	54 Size:	461.1 KB ID:	25126

    Enjoy!


    EDIT: This has been officially fixed in vB 5.7.0. You no longer need the custom CSS fix here. If you've already added the code and you have upgraded to vB 5.7.0, then you can remove the code.
    Last edited by glennrocksvb; 08-30-2022, 09:21 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    I think this fix is now natively implemented in the latest vB 5.7.0 (Beta version at this point). A vB Lead Dev asked permission from me to use this code officially. I'm guessing it would be in 5.7.0. I will confirm once vb.com has been upgraded to 5.7.0. If that is indeed the case, then you can remove this code from css_additional template.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Glenn
      Thanks for the info, and keeping us updated

      Comment


        #4
        I confirmed that this is fixed in vB 5.7.0. I have added a note in the first post about it.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment

        Latest Topics

        Collapse

        Working...
        X