Adding a border radius to YouTube iframe

Does this work across all browsers?

internet explorer 11, and firefox it works.


body {
  background: #f0f0f0;
}

#object-holder {
  position: relative;
  width: 600px;
  height: 338px;
  margin: 1em auto;
  border: 0.5em solid #000;
  border-radius: 50px;
  overflow: hidden;
}

#object-holder iframe {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

Hi there asasass,

maybe this will help…

https://caniuse.com/#search=border-radius

coothead

1 Like

It says nothing about youtube or iframe.

Why should it?

Youtube has no control of a browser’s HTML and CSS. :rolleyes:

coothead

Are you saying it works? Even on chrome, and the others?

A browser will render the CSS that it has implemented.

coothead

Can someone confirm that it works on Chrome.

Hi there asasass,

please do not be obtuse.

The link that I gave you clearly confirms
that Chrome renders border-radius.

coothead

2 Likes

I want to make sure it works first:

ch

1 Like

Did you try? @coothead gives a solution, maybe you should try first

Did I try what?

He showed me it works in chrome.

You first asked if someone could confirm before you tried, that’s kind of strange And after that you not even thanked him!

1 Like

Before I tried what?

Do you have other information that would say it doesn’t work?

What I ment is, that @coothead gave you a solution. Before you tried it you asked if someone could confirm if the solution given by @coothead would work on Chrome without you even trying it. And after he showed you, you not even thanked him. That’s all

1 Like

Yes I did.

I liked it.

And I don’t use chrome.

@asasass. Maybe a good idea to use it while developping :slight_smile: Later on you can remove it again

2 Likes

I hate reinstalling things then uninstalling things. My preference is firefox.

You may not use it for your everyday browsing, that is your choice, but in front-end web development, it is a good idea to have a number of the most popular browsers installed for the purpose of cross-browser testing of your web pages.
That way you can quickly and easily find out if your page works as expected yourself in whatever browser.

7 Likes