Вопрос по youtube, rounded-corners, iframe, css – YouTube встроил видео как iframe с border-radius

2

У меня проблема, которую я совершенно не понимаю. Я получил веб-сайт с видеофрагментом YouTube и хочу округлить границы с помощью CSS. Наhttp://www.wunschpreisdeal.de/empfehlung/winterreifen-profiltiefe-und-zustand-noch-ok видео правильно вставлено с закругленными границами, но это не относится кhttp://www.wunschpreisdeal.de/mitglieder-empfehlung/the-axe-effect.

Они оба имеют одинаковый CSS, я не нашел никакой разницы между этими интеграциями. Может кто-нибудь мне помочь? Если вам нужна дополнительная информация, просто спросите. :)

Спасибо

Вы можете найти некоторую помощь здесь:stackoverflow.com/questions/6535217/… LeBen
В Chrome border-radius не работает ни для одного из них. LeBen
О, я вижу. Но почему тот работает в FF, а на другой - нет? Или лучше, есть ли способ реализовать закругленные границы во всех браузерах (IE может быть исключен;)). Maik

Ваш Ответ

2   ответа
2

Небольшой, но красивый трюк.

iframe,
object,
embed{
    border:5px solid rgba(255,255,255,0);
    -webkit-border-radius: 20px !important; 
    -ms-border-radius: 20px !important; 
    -o-border-radius: 20px !important;  
    border-radius: 20px !important;     
}

DEMO

Это работает в современных браузерах, поэтому +1 для гораздо более элегантного решения; Мой ответ был разработан с учетом устаревших браузеров (таких как IE6), поэтому выбор между этими двумя методами в конечном итоге сводится к тому, хотите ли вы (или нуждаетесь) поддерживать таких пользователей.
Спасибо, мужик. Я пользуюсь этим очень долго. Я знаю, что старые IE и Safari создавали проблемы, потому что я даю все решения людям, которые решают сами. В будущем будет достаточно добавить только пограничный радиус, и это все. Если мы встретимся иногда, я куплю тебе пиво.
3

Чтобы ответить на ваш вопрос заранее, разница между этими двумя страницами заключается в добавленииwmode=transparent кiframe адрес вот так:http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent, Это быстрое решение, чтобы начать работу, но если вы хотите узнать немного больше по этому вопросу, то читайте дальше!

К сожалению, закругление углов встроенных видео, таких как YouTube и Vimeo, довольно сложно из-за различий между старыми браузерами. Даже упаковкаiframe во внешнемdiv и применяяborder-radius а такжеoverflow: hidden к обертке, которая работает для большинстваiframesнеreliably сделать трюк!

Note: Ivijan-Stefan came up with an elegant solution below that works in most modern browsers, so if your site doesn't need to cater to legacy browsers like Internet Explorer 6 and 7, then feel free to use his implementation instead!

Для тех из нас, кому необходимо поддерживать множество устаревших браузеров, единственнымconsistently Надежный способ сделать это - сделать изображение, которое выглядит как изогнутый угол, и использовать копии этого изображения, чтобы скрыть каждый из углов видео. (Здесь, где нам требуетсяwmode=transparent трюк, который я описал выше, так как некоторые браузеры в противном случае отображают угловые изображенияunder видео!)

Вот пример этой техники, примененной кiframeвстроенное видео на YouTube:http://jsfiddle.net/skywalkar/uyfR6/ (примерный радиус = 20 пикселей)

Note: If you make the corner overlays too large (greater than ~20px), then they will cover up the player controls!
To minimize the effects of problem, you can try cutting the corners by rotating the images by 45 degrees. This requires a different set of overlays and some creative use of margins, but may be worth the trouble if you need larger corner radii: http://jsfiddle.net/skywalkar/BPnLh/ (example radius = 30px)

Похожие вопросы