I got a problem I absolutely don't understand. I got a website with YouTube video iframe and want to round the borders via CSS. On http://www.wunschpreisdeal.de/empfehlung/winterreifen-profiltiefe-und-zustand-noch-ok the video is correctly embedded with rounded borders but that's not the case on http://www.wunschpreisdeal.de/mitglieder-empfehlung/the-axe-effect.
They both have the same CSS, I haven't found any difference between those integrations. Can anyone help me? If you need some more info, just ask. :)
thx
Small but beautiful trick.
DEMO
To answer your question upfront, the difference between those two pages is the addition of
wmode=transparent
to theiframe
address like so:http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent
. That's a quick fix to get you going, but if you'd like to learn a bit more on the subject, then read on!Unfortunately, rounding the corners of embedded videos such as YouTube and Vimeo is quite challenging due to the differences between older browsers. Even wrapping the
iframe
in an outerdiv
and applying aborder-radius
andoverflow: hidden
to the wrapper, which works for mostiframes
, doesn't reliably do the trick!For those of us that need to support a variety of legacy browsers, the only consistently reliable way to do this is by making an image that looks like a curved corner, and using copies of this image to cover up each of the corners of the video. (Here's where we require the
wmode=transparent
trick that I described above, since some browsers will otherwise display the corner images under the video!)Here is an example of this technique applied to an
iframe
-embedded YouTube video: http://jsfiddle.net/skywalkar/uyfR6/ (example radius = 20px)