CODEWITHSUNDEEP
javascriptjqueryvideo.js
tfer77
tfer77

Reputation: 826

Hide div on video play

I'm using video.js here: http://dev-carlyle.sassafrascreative.com/ I want the text over the video to disappear when the video's play function is triggered. right now it works sometimes and then sometimes it doesn't. Currently I'm using jquery's hide function but there has to be a better - more reliable - way to do this. Any ideas?

this is a snippet of my current solution, if you can call it that...

<script type="text/javascript">
$(".vjs-big-play-button").click(function(){
$(".banner-email").hide(1000);
});
</script>

Upvotes: 0

Views: 1489

Answers (2)

Austin Pray
Austin Pray

Reputation: 4936

If you read the video.js docs it has this functionality built in

https://github.com/videojs/video.js/blob/master/docs/api.md#events

var myFunc = function(){
  var myPlayer = this;
  $(".banner-email").hide(1000);
};
myPlayer.on("play", myFunc);

This is better because once the video is paused you can make the email thing come back up. It's a custom event listener fired by video.js

play Fired whenever the media begins or resumes playback.

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to use on() function for this like,

<script type="text/javascript">
    $(document).on('click','.vjs-big-play-button',function(){
       $(".banner-email").hide(1000);
    });
</script>

Upvotes: 1

Related Questions