Problems with Iframe and js

Question

I have the following code below that shows a regressive chronometer on my page, the idea is that when zeroing it shows an iframe(video), even shows but the video is flashing as if only it was in eternal update loop. If anyone has the solution I would appreciate I am beginner in this area.

(Function($) {

var launch = new Date(2018, 4, 25, 23, 42); 

var message = $('#message');
var days = $('#days');
var hours = $('#hours');
var minutes = $('#minutes');
var seconds = $('#seconds');

setDate();

function setDate(){
    var now = new Date();
    if( launch < now){
        days.html('<h1>0</H1><p>Dia</p>');
        hours.html('<h1>0</h1><p>Hora</p>');
        minutes.html('<h1>0</h1><p>Minuto</p>');
        seconds.html('<h1>0</h1><p>Segundos</p>');
        message.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/IsHOEl5N0cA?rel=0&amp;start=289" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    }
    else{

            var s = -now.getTimezoneOffset()*60 + (launch.getTime() - now.getTime())/1000;
            var d = Math.floor(s/86400);
            days.html('<h1>'+d+'</h1><p>Dia'+(d>1?'s':''),'</p>');
            s -= d*86400;

            var h = Math.floor(s/3600);
            hours.html('<h1>'+h+'</h1><p>Hora'+(h>1?'s':''),'</p>');
            s -= h*3600;

            var m = Math.floor(s/60);
            minutes.html('<h1>'+m+'</h1><p>Minuto'+(m>1?'s':''),'</p>');

            s = Math.floor(s-m*60);
            seconds.html('<h1>'+s+'</h1><p>Segundo'+(s>1?'s':''),'</p>');
            setTimeout(setDate, 1000);

            message.html('PRÓXIMO TREINO INICIA EM... ');

        /**if(d == -1){
            days.html('<h1>0</H1><p>Dia</p>');
            hours.html('<h1>0</h1><p>Hora</p>');
            minutes.html('<h1>0</h1><p>Minuto</p>');
            seconds.html('<h1>0</h1><p>Segundos</p>');
            message.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/IsHOEl5N0cA?rel=0&amp;start=289" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
        }**/
    }
}

})(jQuery);

Answer 1

Your problem is that the function is called all the time. Then the video is rendered every second, so it 'flashes'.

What you can do is use the function setInterval() passing the setDate() function and the 1000 ( value means it will run every second) by assigning a variable. And within the IF you use the clearInterval() to cancel the execution of the function.

A small example to serve as your inspiration:

// Define a data limite
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// Atualiza o cronometro a cada 1s
var x = setInterval(function() {

  // Pega a data e a hora de hoje
  var now = new Date().getTime();

  // Encontr a diferenca entre hoje e a data limite
  var distance = countDownDate - now;

  // Calcula dias, horas, minutos e segundos
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Mostra o resultado em id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Quando o prazo termina, mostra o texto 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<!-- Mostra o cronometro -->
<div id="demo"></div>

Good luck! ;)