# Changing corner radius for embeded video

**URL:** <https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698>\
**Category:** Custom code\
**Created:** [September 17, 2022, 6:17pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698 "2022-09-17T18:17:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![barlider\_liderman](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/barlider_liderman/32/516_2.png) [@barlider\_liderman](https://forum.readymag.com/u/barlider_liderman)\
**Post date:** [September 17, 2022, 6:17pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/1 "2022-09-17T18:17:45Z")

</div>

Hey,  
I have embeded my Vimeo video, and I would like to change the corner radius inside the code.  
Thanks!

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [September 20, 2022, 8:00am UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/2 "2022-09-20T08:00:46Z")

</div>

Hey,  
you have to get the data-id of your videoelement via the devtools of your browser.

And then change the below code to your specific id and add into the customcode css section:

```auto
[data-id="63296f148905160038c83901"] {
 border-radius: 20px!Important;
}

```

Keep in mind, that the corner radius will only be seen in the published version / preview viewer and not in the editor.

---

<div class="post-metadata">

**Author:** ![barlider\_liderman](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/barlider_liderman/32/516_2.png) [@barlider\_liderman](https://forum.readymag.com/u/barlider_liderman)\
**Post date:** [October 2, 2022, 4:35pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/3 "2022-10-02T16:35:34Z")

</div>

> [@neueMeta](#):
>
> `border-radius: 20px`

EDIT: IT WORKED!!!  
thanks so much!

Thanks for the reply!  
I tried it but unfortunately it did not work

After trying the CSS section, i tried changing it inside the video’s code, and it made it really small; like the coreners got margins but no radius

Any idea?  
Thanks!

---

<div class="post-metadata">

**Author:** ![linobambiino](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/linobambiino/32/764_2.png) [@linobambiino](https://forum.readymag.com/u/linobambiino)\
**Post date:** [January 9, 2023, 3:31pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/4 "2023-01-09T15:31:15Z")

</div>

Hey!  
Is it also possible with dropbox videos to create round corners?  
I embedded the code (and changed the data-id) but it just not works…

My code:  
[data-id=“63bc295257caf200271c153a”] {  
border-radius: 20px!Important;  
}

Any ideas why?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![Evgeny\_Kashirin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/evgeny_kashirin/32/816_2.png) [@Evgeny\_Kashirin](https://forum.readymag.com/u/Evgeny_Kashirin)\
**Post date:** [February 2, 2023, 10:36pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/5 "2023-02-02T22:36:33Z")

</div>

If the code from the message above doesn’t work for you, try this

```auto
[data-id="63da7d5edadd7f003865570a"] {
  border-radius: 20px;
  overflow: hidden;
}

```

---

<div class="post-metadata">

**Author:** ![Joe\_Meier](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/joe_meier/32/897_2.png) [@Joe\_Meier](https://forum.readymag.com/u/Joe_Meier)\
**Post date:** [March 11, 2023, 3:41pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/6 "2023-03-11T15:41:09Z")

</div>

Howdy!  
I’m working on Chrome and when i publish → open to see it. I see the radius I set for a split second, but then it “corrects” itself and reverts right back to the original video format.

Any idea why this would be happening? Best!  
Joe

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [March 14, 2023, 8:51am UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/7 "2023-03-14T08:51:16Z")

</div>

try to add an “!important” behind the css value like:

```auto
border-radius: 20px!important;

```

---

<div class="post-metadata">

**Author:** ![Miguel\_Silgado](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/miguel_silgado/32/1360_2.png) [@Miguel\_Silgado](https://forum.readymag.com/u/Miguel_Silgado)\
**Post date:** [September 26, 2023, 8:20am UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/8 "2023-09-26T08:20:12Z")

</div>

Hello! Thank you so much for this

I have a question. Is there a way to apply the same rule to multiple data ids?

When i duplicate the rule and enter the ID for another video it only applies the rule to the first one.

Thank you!

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [September 29, 2023, 7:35pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/9 "2023-09-29T19:35:04Z")

</div>

maybe with this:

```auto
[data-id="63da7d5edadd7f003865570a"],[data-id="27da7d5edadd7f0038655746"] {
  border-radius: 20px;
  overflow: hidden;
}

```

\*haven´t tested it

---

<div class="post-metadata">

**Author:** ![bjbrown](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@bjbrown](https://forum.readymag.com/u/bjbrown)\
**Post date:** [March 7, 2024, 3:04pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/10 "2024-03-07T15:04:24Z")

</div>

have you figured it out?

---

<div class="post-metadata">

**Author:** ![Laura\_Zarate](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/laura_zarate/32/1790_2.png) [@Laura\_Zarate](https://forum.readymag.com/u/Laura_Zarate)\
**Post date:** [March 10, 2024, 3:18pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/11 "2024-03-10T15:18:16Z")

</div>

How do I find the Data ID from vimeo?

---

<div class="post-metadata">

**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\
**Post date:** [March 13, 2024, 7:23pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/12 "2024-03-13T19:23:38Z")

</div>

Find the father div of your Vimeo embed, you can use the ID included in it:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/5/59c7cad2ae84c8c55afdd7926d9ad528838a37fd.jpeg)

Btw, did this work? [Embedded video Rounded Corners - #3 by Laura\_Zarate](https://forum.readymag.com/t/embedded-video-rounded-corners/2607/3)

---

<div class="post-metadata">

**Author:** ![Shawn\_Convey](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Shawn\_Convey](https://forum.readymag.com/u/Shawn_Convey)\
**Post date:** [August 5, 2024, 12:47pm UTC](https://forum.readymag.com/t/changing-corner-radius-for-embeded-video/698/13 "2024-08-05T12:47:30Z")

</div>

Hey all!  
So I got it to work for my embedded VIMEO link BUT the corners are not smoothly round.  
they are a bit jagged – any suggestions?

 ![Screenshot 2024-08-05 at 6.15.19 PM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/9/95057735f6dcf2b73c09283e4b6e1ffcc1db1ce1.jpeg)