CSS element with opacity overlaps html5 video

admin

Administrator
Staff member
I'd recently added an ability to play HTML5 video on my customer's WordPress site.
As well I have sharing buttons enabled by <a href="https://github.com/huyz/wp-sharedaddy" rel="nofollow noreferrer">sharedaddy</a> (as part of <a href="https://wordpress.org/plugins/jetpack/" rel="nofollow noreferrer">JetPack</a> plugin).
My HTML5 video is dynamically opened by JavaScript, when clicking on the link.
I'm expecting, when element becomes visible it will overlap all other elements, but share buttons always displayed above the video.

<img src=" " alt="enter image description here">

Here's how CSS looks like:

HTML5 video:

Code:
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 buttons CSS:

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

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

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

After playing around with CSS I'd noticed, that when
Code:
opacity
is changed to
Code:
1.0
, share buttons are moving behind
Code:
&lt;video&gt;
, but any value &lt;
Code:
1.0
, moves buttons to front.
Is it some CSS issue or I'm doing something wrong.

Link to the site <a href="http://www.laitman.ru/crisis/163038.html" rel="nofollow noreferrer">here</a>