Ease Transition Effect For Dimming Screen When Video Is Played

Question

I have my page set up so when a user presses play on the video it dims the background. When they press pause it will turn off the dimming effect. I am trying to add an ease transition effect so it's a little smoother when the effect is turned on and off. I'm not sure where to add the transition css because what I've don't so far doesn't seem to work.

HTML

<div id="overlay"></div>

<div class="col-md-6">
    <div id="introRight">
        <video poster="img/WhoWeAre.jpg" preload="auto" controls>
        <source src="video/WhoWeAre_HI.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="video/WhoWeAre_HI.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="video/WhoWeAre_HI.webm" type='video/webm; codecs="vp8, vorbis"'>
        </video>
    </div> <!-- end introRight -->
</div>

JAVASCRIPT

<script>
$("video").on('play',function(){
    $("#overlay").show();
});

$("video").on('pause',function(){
    $("#overlay").hide();
});

$("video").on('ended',function(){
    $("#overlay").hide();
});
</script>

CSS

#overlay {
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.8;
  background-color: #282828;
  z-index: 20;

  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}


video {
  width: 100%    !important;
  height: auto   !important;
  margin: 0 auto;
  margin-top: 50px;
  z-index: 999;
  position: relative;

  -webkit-box-shadow: 3px 3px 11px 0 rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    3px 3px 11px 0 rgba(50, 50, 50, 0.75);
  box-shadow:         3px 3px 11px 0 rgba(50, 50, 50, 0.75);
}

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

Use fadeIn() instead of show(), and fadeOut() instead of hide(). Also, you have to remove display: none from your CSS and set default opacity to 0.

This link might also be helpful.

edited May 23 '17 at 12:08

Community

1
1

answered Jul 25 '16 at 20:49

Marcin Dusza

412
3
10

Thanks I see where this is leading but the article doesn't show me where I should apply the 'visibility' property. I've made the changes you recommended but nothing happens now. – user3786102 Jul 25 '16 at 21:00

Ease Transition Effect For Dimming Screen When Video Is Played

1 Answers1