Question

Alright.. I’m struggling with this one..

I’ve got an image with a transparent “hole” cut in it, and I place a video behind it. However, when the video is there, the image becomes sort of.. de-saturated.

Here is the CSS

  .header {
      position: relative;
  }

  .header img{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      cursor: pointer;
  }

  .header video{
      position: absolute;
      width: 168px;
      left: 553px;
      top: 109px;
      z-index: 1;
  }

And the markup

<div class="span12 header"><img src="img/screenshot-final.png"/><video src="img/video/video-final.mp4"></video></div>

I’m not sure why the video would effect the image since its dimensions are fit to the hole in the image. However, setting display:none on the video “fixes” the image.

Answer 1

Im pretty sure this is unavoidable, have you thought about placing the image ontop of the video to fit the hole with an appropriate z-index. Not ideal but I think the de-saturation is standard for a video overlaying an image!

EDIT: try putting you video in a div tag and the putting your image inside a div tag inside that div! then use absolute positioning to rectify the positioning! this should sort you out

EDIT:

<div class="span12 header">
<video src="img/video/video-final.mp4"></video>
<div id="image">
<img src="img/screenshot-final.png"/>
</div>
</div>