Menu
Please see this fiddle. Notice instantly before loading the border-radius works fine. A few milliseconds later the rounded corners disappear.
How can I add rounded corners to embedded YouTube videos?
656
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
No. Borders sit on the outside of the element and on the inside of the box-model margin area. Outlines sit on the inside of the element and the box-model padding area ignores it.
This is very simple using CSS3. All you guys are missing out is the z-index which is playing bad cop.
Look at the code below, I wrapped the player in a div, set it's height and width as I like, set overflow to hidden and z-index as required. Border radius works pretty awesome!
.player { border-radius: 10px; overflow: hidden; z-index: 1; height: 320px; width: 480px; }<div class="player"> <iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
