CODEWITHSUNDEEP
javascriptjqueryhtml
user3786102
user3786102

Reputation: 145

Dim background when video is played

I am using the html5 video element a lot more now. I'd like to dim the background of my page when the user presses play on the video. When they press Pause or video ends, I want the screen to turn off the dim.

I have this div on my page that is set to display: none It is not visible on the page when it loads but I'm not familiar enough with Javascript to get it to do what I want.

Here is the div on my page that sets the dim. 

<div id="overlay" style="display:none;position:fixed;width:100%;height:100%;top:0;left:0;opacity:0.6;"></div>

Video HTML

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

Upvotes: 0

Views: 1267

Answers (3)

mxlse
mxlse

Reputation: 2784

You can test:

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

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

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

But you have to add a background-color for the #overlay to dim the background. Morover you can set a z-index for the overlay which is lower than the video to be sure the video is always on top:

#overlay{
   background-color: #000;
   z-index: 0;
}
#video{
   z-index: 999
}

https://jsfiddle.net/ptvsovw7/3/

Upvotes: 1

Tracker1
Tracker1

Reputation: 19334

First, you'll need to identify the media events you are going to need. It seems that playing and suspend are what you are looking for.

Second, during playback, you'll want to set your background as appropriate... assuming you are only needing to set the background for the body:

function dimBackground() {
  //dim background, alternatively, you can add a className
  document.querySelector('body').style.backgroundColor = '#333';
}

function undimBackground() {
  // remove assigned property, fallback to stylesheet
  delete document.querySelector('body').style.backgroundColor;
}

From here, you can create event listeners for the media player on your page...

var player = document.getElementById('MyVideoElementId');
// or
var player = document.querySelector('.MyContainer video');

//subscribe to events
player.addEventListener('playing', dimBackground);
player.addEventListener('suspend', undimBackground);

NOTE: This will only work for modern browsers using the <video> element. Older browsers don't support this, and the events will be different for fallback players. addEventListener requires IE9 or newer browsers, all modern browsers support this.

Upvotes: 0

The Dark Knight
The Dark Knight

Reputation: 727

$('video').on('play', function(e) {
   $("#overlay").show();
}, true);

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

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

Maybe something like what is outlined above?

Upvotes: 3

Related Questions