Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 25, 2016 at 10:45 pm #704033
    cjbuilt

    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!

    October 26, 2016 at 6:12 am #704117
    Jordan

    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,
    Jordan

    October 26, 2016 at 9:14 pm #704516
    cjbuilt

    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.

    October 30, 2016 at 6:23 am #705757
    Ismael

    Hi!

    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.

    Regards,
    Ismael

    October 30, 2016 at 6:52 am #705762
    cjbuilt

    But then it is not responsive below those dimensions.

    November 1, 2016 at 5:53 pm #706810
    Andy

    Hi,

    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,
    Andy

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