Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 6, 2021 at 6:59 pm #1331751
    julhobart

    Hi! I created this grid row with an image and video side by side:
    https://ade-medical.z4pby1v9-liquidwebsites.com/product/test/

    I’m trying to get the corners on the video to be rounded. It was recommended to me to use this code:

    #av-layout-grid-2 .avia-video.avia-video-custom,
    #av-layout-grid-2 .avia-iframe-wrap iframe {
    border-radius: 15px;
    }

    This works great! However, I want to be able to move the video grid row and place it on several other pages, when I move it, the grid number changes. I tried adding a custom css class and this code:

    .round-corners.avia-video.avia-video-custom,
    .round-corners.avia-iframe-wrap iframe {
    border-radius: 15px !important;
    }

    But it doesn’t work. Can you help?

    Also, is it possible to line the video up with the image next to it so they are perfectly aligned top and bottom?

    Thanks!

    December 7, 2021 at 4:38 am #1331781
    Ismael

    Hey julhobart,

    Thank you for the inquiry.

    You have to set the overflow property of the video container to hidden. Try to use this css code.

    .avia-video.avia-video-custom.round_corners {
    border-radius: 20px;
    overflow: hidden;
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    December 19, 2021 at 5:40 pm #1333455
    julhobart

    Ok! Thanks, that seems to have worked. What about lining up the video and the image? Is there a way to set the image and video to be aligned? They aren’t aligned on the bottom.

    Thanks!

    December 19, 2021 at 10:18 pm #1333473
    Mike

    Hi,
    When I check it looks like your videos are not the same size as your images, try adjusting your custom css:

    .avia-video.avia-video-custom.round_corners {
    border-radius: 20px;
    overflow: hidden;
}

    to this:

    .avia-video.avia-video-custom.round_corners {
    border-radius: 20px;
    overflow: hidden;
    min-height: 300px;
    margin-bottom: 0;
}

    your very last video doesn’t have the .round_corners class so it doesn’t have round corners and this css won’t help, so either add the class to it or use this css to adjust it:

    #top.single-product.woocommerce-page #main .avia-video.avia-video-custom {
    min-height: 300px;
    margin-bottom: 0;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    December 21, 2021 at 6:35 am #1333597
    julhobart

    Fantastic, thanks!!

    December 21, 2021 at 11:01 am #1333622
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘round corners on video’ is closed to new replies.