Пользовательская кнопка закрытия FancyBox Border-Radius Issue

Question

Пользовательская кнопка закрытия FancyBox Border-Radius Issue

0

Я создал пользовательскую кнопку закрытия для ссылки fancybox, которая идет на видео YouTube. Когда я добавляю радиус границы, чтобы сделать его кругом, кнопка закрытия закрывается за видео, если по каким-то причинам его просматривают в Firefox.

Здесь CSS:

.fancybox-close {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    cursor: pointer;
    background: #CCC;
    z-index: 8040;
}

Полный сайт можно посмотреть здесь http://www.neoscapelabs.com/projects/469seventh/

Mike K. 10 апр. 2014, в 22:12

Источник

0

отображается в виде круга сверху видео в моем Chrome
Starscream1984 10 апр. 2014, в 19:45
0

здесь же, на каком браузере вы тестируете?
ramesh 10 апр. 2014, в 19:47
0

Моя ошибка, проблема, кажется, происходит только в Firefox
Mike K. 10 апр. 2014, в 20:04

Показать ещё 1 комментарий

Теги:

jquery

html

css

css3

fancybox

1 ответ

Ещё вопросы

отображается в виде круга сверху видео в моем Chrome
здесь же, на каком браузере вы тестируете?
Моя ошибка, проблема, кажется, происходит только в Firefox

JFK · Accepted Answer · 2014-04-10T19-55-00.000Z

Вы должны сделать пару настроек вашего кода:

1). Измените URL-адрес своей ссылки:

http://www.youtube.com/v/PzBk4-awY40?autoplay=1

к этому

http://www.youtube.com/embed/PzBk4-awY40?autoplay=1&wmode=opaque

Обратите внимание, что мы переключились с v/ на embed/ и добавили трейлинг-параметр &wmode=opaque

2). Как это ни странно, установите wmode opaque для вашего iframe. Вы можете сделать это с помощью опции iframe API, например:

iframe : {
    preload: false,
    wmode: "opaque"
}

Кстати, я бы также посоветовал установить preload на false.

JSFIDDLE

Работает нормально сейчас, спасибо за помощь