Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #704033

    I’m trying to find a simple way to universally limit the max width of embedded videos using css.

    The closest I have come is with this:

    .avia-video.avia-video-16-9 {
        max-width: 600px;
        position: relative;
        height: auto;
        margin: 0 auto;
        max-height: 338px;
    .avia-video.avia-video-16-9 iframe, .js_active .avia-iframe-wrap iframe, div .avia-video .avia-iframe-wrap {
        max-width: 600px;
        max-height: 338px;

    But it leaves a huge area of padding underneath. Removing the padding makes the video disappear.

    Thanks for a great theme!


    Hey cjbuilt,

    Thanks for your kind words!

    Would you mind providing a precise link to your site, showing the video in question? We need to be able to inspect it in order to help :)

    Best regards,


    Well, it applies to really any video embedded using the theme shortcode. I set up a page for you to play around with it. Link below…

    Thanks. And while I realize that I can use avia builder columns, etc. to limit the video width, or use the ARVE plugin, I am trying to find a simple CSS solution b/c I am converting a site to enfold and I don’t want to rebuild all the pages, and the client doesn’t want the videos to be full page width.



    Thank you for the info.

    You have to define the height as well.

    .avia-video {
        max-width: 600px;
        height: 338px;
        max-height: 338px;

    After defining the height, you can remove the bottom padding which is there to keep the aspect ratio of the video.



    But then it is not responsive below those dimensions.



    so add some media queries to your code, to make it work for smaller screen sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.