Rounded corners on a video?

  • 11 December 2018
  • 5 replies
  • 309 views
T

Is there any way to get rounded corners on a video embed? I’ve got a template with a row of images with rounded corners, but some of the spots will be videos, rather than images. We like the soft look of the rounded corners, so we’re trying to figure out how to do that on the videos. There must be some sort of clever workaround someone has already invented! Thanks!

5 replies

Allen

I’ve tried this before and here is what I’ve done. If you’re using iframe embeds from youtube and know a little about HTML & CSS you can wrap your embed code with a div. I see in Unbounce you have to use a “Custom HTML” tool instead of the “Embed Video” since the embed option doesn’t allow for extra HTML besides the iframe tag. Example:

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/NTzaUjPuqO0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

You can leave the width and height from the embed if you would like because we’ll create CSS that will be responsive. Then you would add CSS class named “video-container” in your stylesheet and use:

.video-container { 
border-radius: 10px;
display: block;
height: 0;
overflow: hidden;
padding: 0;
padding-bottom: 75%;
position: relative;
}

.video-container iframe { 
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

You might have to adjust the “padding-bottom” on your .video-container CSS according on how you drew height and width of the “Custom HTML” box on your page. You can adjust the border-radius in .video-container to round the corners more or less.

See if that works for you or not.

Kyle.C
Userlevel 5

I have done something similar and you will definitely need to use custom HTML and CSS. It can be a trial and error process until you get the exact look you want, and don’t forget to make it look great on both mobile and desktop!

Looks like @Allen’s code is a great place to start 🙂

T

Thanks for this, Allen. What if I’m not using an iframe? We’re pulling our video from Wistia. Here’s the code:

Allen

Hi Tracey1,

I don’t believe I see the code. You might need to use the “Preformatted text” option on the forum’s editor and paste the code with the quote marks.

I did see that Wistia can provide a few embed options which one is an iframe embed code. You can see here: https://wistia.com/support/embed-and-share/video-on-your-website

T

Whoops! Sorry about that! See if this works.

Also, I can’t use iframe because of some other coding on the page from another developer. 😦

Reply


Terms & ConditionsCookie settings