Блог

У меня есть ссылка на анкор Lity, которая должна вывести модальное видео, содержащее видео на Youtube. Странно то, что это прекрасно работает на рабочем столе Chrome, но в Safari и мобильном Chrome ссылка недоступна для кликабельности за вычетом небольшой области. Я пробовал различную z-индексацию, различные события указателей и пытался полностью удалить абсолютное позиционирование, но оно все еще недоступно для мобильных устройств.

Я добавил границы, чтобы показать, где находится область, доступная для кликабельности, а где нет. Синий цвет за пределами красной/зеленой границы позволяет модальному выскочить. Внутри красного/зеленого он не доступен для кликабельности.

Опять же, это только в мобильном браузере Safari и Chrome, на рабочем столе все в порядке.

Вот структура HTML

 <div class="featured-video">
    <a href="https://www.youtube.com/embed/_XXXXXX" data-lity="" class="videoLink">
        <img data-src="https://i3.ytimg.com/vi/XXXXXX/hqdefault.jpg" alt="product video" class="videoImage lazyloaded" src="https://i3.ytimg.com/vi/_R1CnAi4PKM/hqdefault.jpg">
        <span class="yt-thumb-button">.</span>
    </a>
 </div>
 

Вот мой CSS/SCSS

 .featured-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    z-index: 100;
    pointer-events: none;
    border: 1px solid blue;

    .videoLink {
        
        position: absolute;
        top: 0;
        left: 50%;
        width: 90%;
        height: 90%;
        transform: translateX(-50%);
        z-index: 101;
        display: block;
        border: 1px solid limegreen;
        pointer-events: auto;

    }
}

.yt-thumb-button {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // z-index: 1;
    background: url(https://cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png) no-repeat center center;
    background-size: 20%;
    color: transparent !important;
    pointer-events: none;

    border: 1px solid red;

    amp;:hover {
        opacity: .4;
        transition: opacity .2s ease-out;
    }
}
 

Кликабельное Изображение Области

Значение z-index в featured-video больше, чем у вашего класса кнопок. Установите z-index значение button равным 999.