Adding a border radius to YouTube iframe


#1

Does this work across all browsers?

internet explorer 11, and firefox it works.
https://jsfiddle.net/h3b21gnL/4/


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;
}

#2

Hi there asasass,

maybe this will help…

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

coothead


#3

It says nothing about youtube or iframe.


#4

Why should it?

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

coothead


#5

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


#6

A browser will render the CSS that it has implemented.

coothead


#7

Can someone confirm that it works on Chrome.


#8

Hi there asasass,

please do not be obtuse.

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

coothead


#9

I want to make sure it works first:
https://www.codeproject.com/Questions/875589/Iframe-Border-Radius-Dosnt-Work-On-Chrome-And-Oper


#10

ch


#11

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


#12

Did I try what?

He showed me it works in chrome.


#13

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


#14

Before I tried what?


#15

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


#16

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


#17

Yes I did.

I liked it.

And I don’t use chrome.


#18

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


#19

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


#20

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.