Okay
  Public Ticket #3070434
Videoplayer Custom ratio
Closed

Comments

  •  5
    Oliver started the conversation

    Hi There

    I have several Videos with different Aspect Ratios to place.
    But the Nectar Video Player allows only Aspect Ratio 9:16.

    (See the Screencast to the right is cropped, because the video is higher)

    Can I use custom aspect ratio via CSS?

    Or is there a better way to solve this?
    I have tried embedded code as well. But there was no autoplay or loop.

    Thanks for your help.

  •  5
  •  1,877
    Judith replied

    Hello Oliver,

    Please try this css:

    .wpb_video_widget.vc_video-aspect-ratio-916 .wpb_video_wrapper {
        padding-top: 222.77%;
    }

    Thanks.

  •  5
    Oliver replied

    Awesome! Thanks a lot!

  •  5
    Oliver replied

    Hi unfortunately I'm ending up with different video ratios.
    Some of them are «real» 9:16 and some of them are slightly taller.
    With the added CSS code from Judith now all the «real» 9:16 are cropped on the sides.
    https://gotomo.myhostpoint.ch/

    Is there a way to make the ratio adaptive? so the video wrapper takes the dimesions of the video?
    Or is any one having another idea?

  •  8,839
    Tahir replied

    Hey Again,

    Please remove the CSS provided by Judith and use this instead:

    .nectar_video_player_self_hosted .wpb_wrapper video, .nectar_video_player_self_hosted__overlay {
        object-fit: contain;
    }
    

    Thanks 


    ThemeNectar Support Team 

  •  5
    Oliver replied

    thanks that works nicely.
    But: As long as I do not put a shaddow on the item/box.
    In such a case the white boarder to the left and right apear.
    https://gotomo.myhostpoint.ch/

  •  8,839
    Tahir replied

    Could you remove all Custom CSS so we can take a look.

    Thanks


    ThemeNectar Support Team 

  •  5
    Oliver replied

    ok, removed.

  •  8,839
    Tahir replied

    Could you provide the aspect ratio for each video and add an Extra Class to each column that has the video so i can write up custom CSS for it. 

    Thanks 


    ThemeNectar Support Team 

  •  5
    Oliver replied

    done.These are the IDs and the ratios:


    videoregular      9:16
    videohoch      207:454
    videoquer     16:9
    videoquadrat     1:1

  •  8,839
    Tahir replied

    Hey Again,

    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):

    #videoregular .wpb_video_widget.vc_video-aspect-ratio-916 .wpb_video_wrapper {
        padding-top: 56.25% !important;
    }
    #videohoch .wpb_video_widget.vc_video-aspect-ratio-916 .wpb_video_wrapper {
        padding-top: 219.32% !important;
    }
    #videoquer .wpb_video_widget.vc_video-aspect-ratio-916 .wpb_video_wrapper {
        padding-top: 177.77% !important;
    }
    #videoquadrat .wpb_video_widget.vc_video-aspect-ratio-916 .wpb_video_wrapper {
        padding-top: 100% !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  5
    Oliver replied

    Perfect! Thank you very much!

  •  5
    Oliver replied

    I'm really sorry, to open it again :-(

    All works fine. But as you can imagine, placing several videos directly slows down the page dramaticly. Because one video is aprox 2MB
    I think I should prefere the vimeo embed version.
    see last row: https://gotomo.myhostpoint.ch/

    BUT: I'm facing the same issue with the white boarder left and right. I tried to adapt your css code. Did not work.
    As well the video should be aoutoplay.


    Do you have any trick to do so?
    Again sorry for re-opening...


  •  8,839
    Tahir replied

    Hey Again,

    Sure, no issues. 

    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):

    .wpb_video_widget.vc_video-aspect-ratio-916.hoch .wpb_video_wrapper {
        padding-top: 219.32% !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  5
    Oliver replied

    Perfect! I adopted it for the other dimension/ratio as well. Works fine.
    Only Issue: they do neither loop nor autoplay....
    can I fix this?

  •  8,839
    Tahir replied

    I am afraid, the autoplay feature is not available when using the embed method.

    Thanks


    ThemeNectar Support Team 

  •  5
    Oliver replied

    even using the embed code in a iframe woulkd not work?

  •  8,839
    Tahir replied

    You can try using an Iframe as with that i believe you can set the autopay attributes.

    Thanks


    ThemeNectar Support Team 

  •  5
    Oliver replied

    Ok , thanks anyway for you great support.