Okay
  Public Ticket #2965122
Change video's ratio
Closed

Comments

  •  2
    StefanoCotelli started the conversation
    January 24, 2022 at 3:46pm

    Hi,

    i have this page with some videos that have a natively ratio of 4:5 or 1:1.

    How can i use this ratio on "Self hosted video player"?

    Thanks

  •  1,877
    Judith replied
    January 24, 2022 at 3:50pm

    Hi Stefano,

    Thanks for keeping in touch,

    You can select from here:

    8616859078.png

    Thanks.

  •  2
    StefanoCotelli replied
    January 25, 2022 at 9:57am

    Yes, but there are not 1:1 and 4:5 option in that tab. It is the reason why I open this ticket basically.

  •  8,839
    Tahir replied
    January 25, 2022 at 10:25am

    Hey Again,

    Try the below CSS to adjust its ratio.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    /* 1/1 ratio */
.wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper {
    padding-top: 100%;
}

    OR

    /*  4/5 ratio */
.wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper {
    padding-top: 80%;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    StefanoCotelli replied
    January 25, 2022 at 10:55am

    Thanks for the answer,

    have i to give thiss css to element with witch aspect ratio?
    For example, if i have a 9:16 video (only in the page builder, but natively is 4:5), i have to give it this css?

    /*  4/5 ratio */
.wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper {    padding-top: 80%;
}


    Can you show me an example of the syntax error you mentioned?

    Thanks

  •  8,839
    Tahir replied
    January 25, 2022 at 10:58am

    Hey Again,

    Yes, that's correct. 

    You only need to worry about the Red Crosses in the Custom CSS Box. 

    Thanks 

    ThemeNectar Support Team