html - 不透明度を持つ CSS 要素が html5 ビデオに重なる

Question

最近、顧客の WordPress サイトで HTML5 ビデオを再生する機能を追加しました。同様に、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;
}

共有ボタン 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;
}

opacityCSS をいじってみたところ、が に変更されると1.0、共有ボタンが の後ろに移動することに気付きました<video>が、任意の値 <1.0では、ボタンが前に移動します。それはCSSの問題ですか、それとも何か間違っていますか。

サイトへのリンクはこちら