play/pause progress bar and a video at the same time when switching tabs

i have a page with a 20 seconds progress bar and a video, and i want the progress bar animation starts when i play the video. and i want both, video and progress bar, pause when i switch tabs

HTML

<div id="progressBar"><div></div></div>

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/T3q_s_mdeZY&enablejsapi=1&autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>

i'v tried this code below but no change

JavaScript

jQuery(function ($) {

function handleVisibilityChange() {
if (document[hidden]) {
myvideo.pause();
} else {
myvideo.play();
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " sec ");
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
} else {
$('#progressBar').replaceWith('<button id="buttonProgressBar">Passez à l\'étape suivante <i class="fa fa-fast-forward" aria-hidden="true"></i></button>')
}
};
progress(20, 20, $('#progressBar'));
}
}
});