Changing corner radius for embeded video

Custom code
1

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

2

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:

[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.

3 Likes
3

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!

1 Like
4

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

5

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

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

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

7

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

border-radius: 20px!important;
8

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!

9

maybe with this:

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

*haven´t tested it