Search code examples
htmlwordpresscsswordpress-jetpack

CSS element with opacity overlaps html5 video

I'd recently added an ability to play HTML5 video on my customer's WordPress site. As well I have sharing buttons enabled by sharedaddy (as part of JetPack 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.

enter image description here

Here's how CSS looks like:

HTML5 video:

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:

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;
}

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

Link to the site here

Solution

  • just add z-index:1 to your .podPressPlayerSpace, it will look like this:

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