Элемент CSS с перекрытием непрозрачности html5 video

Question

Недавно я добавил возможность воспроизведения видео HTML5 на сайте WordPress моего клиента. Кроме того, у меня есть кнопки обмена, включенные sharedaddy (как часть плагина JetPack). Мое видео HTML5 динамически открывается JavaScript при нажатии на ссылку. Я ожидаю, когда элемент станет видимым, он будет перекрывать все остальные элементы, но кнопки общего доступа всегда отображаются над видео.

Вот как CSS выглядит следующим образом:

HTML5 видео:

video { 
    width: 320px; 
    height: 186px; 
} 

video { 
    object-fit: contain; 
} 

.podPress_content { 
    border: 0; 
    margin: 0; 
    line-height: 15px; 
    padding: 0; 
    font-size: 80%; 
    text-align: left; 
    display: block; 
} 

Share Кнопки CSS:

li.share-facebook a.sd-button > span { 
    background-image: url('images/facebook.png'); 
} 

.sd-social-icon a.sd-button > span { 
    padding: 3px; 
    width: 16px; 
    height: 16px; 
    text-indent: -9999px; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

a.sd-button > span { 
    padding: 4px 8px; 
    display: block; 
    opacity: 0.8; 
    line-height: 1.5em; 
    text-shadow: none; 
} 

Позабавившись с CSS я заметил, что когда opacity изменено на 1.0, кнопки совместного доступа движутся за <video>, но любое значение < 1.0, перемещает кнопки на передний план. Это какая-то проблема с CSS, или я делаю что-то неправильно.

Ссылка на сайт here

Answer 1

просто добавить z-index:1 к вашему .podPressPlayerSpace, он будет выглядеть следующим образом:

.podPressPlayerSpace { 
    position: absolute; 
    z-index: 1; 
}