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

    Free Mod 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


          #5
          glennrocksvb

          Thank you, but it does not work on this version vBulletin 6

          Comment


            #6
            As mentioned in the note at the bottom of the first post, the issue the CSS code was trying to fix had been resolved in vB 5.7.0. So it's also fixed in vB 6.x. You don't need this mod anymore.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment

            Users Viewing This Page

            Collapse

            There is 1 user viewing this forum topic.

            • Guest Guest

            Latest Posts

            Collapse

            Working...
            X
            Searching...Please wait.
            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

            Please push the back button and reload the previous window.'
            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

            Please push the back button and reload the previous window.'
            An internal error has occurred and the module cannot be displayed.
            There are no results that meet this criteria.
            Search Result for "|||"