I have inserted a button that when it is loaded, appears the advertising ahead and only after the video gives append, but with this I can not declare the Youtube API script, I think that is the error. I tried copying the API code from the site but it did not work, maybe because the iframe does not exist yet when it loads. This is the code I have
HTML
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12" style=" margin-bottom:30px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="left" style="padding:0 0 0 0;margin-bottom:20px;">
<div id="apa">
<?php
$daods = mysql_query("bla bla bla");
$moo=mysql_fetch_assoc($daods);
$ver_freg=mysql_query("bla bla bla");
$mos_freg=mysql_fetch_assoc($ver_freg);
$imagens=$mos_freg['imagem'];
?>
<img src="backoffice/admin/uploads/imagens/<?php echo $imagens ?>" width="100%">
<span class="play" data-id="<?=$id4; ?>" onclick="iframe()">
<i class="fa fa-play-circle fa-5x under"></i>
</span>
</div>
<span id="tempo">O vídeo começará dentro de <span id="tempo1">10</span> <span id="sec">segundos!</span></span>
</div>
<br><br><h4 style="color:#ecf0f1;"><?php echo $mostra ?></h4>
<div style="text-align:justify;">
<font color="#ecf0f1" face="Montserrat" size="2" ><?php echo $descricao ?></font>
</div>
</div>
SCRIPT
function iframe(){
var distance = 10;
$("#tempo").show(0);
$("#apa").empty();
$("#apa").append('<img src="caminho da imagem da publicidade/148033365142806.jpg" style="width:100%;" />');
//countdown do tempo até ao iframe carregar
var x = setInterval(function() {
distance--;
$("#tempo1").html(distance);
if(distance == 1){
$("#sec").empty();
$("#sec").html("segundo!");
}
}, 1000);
//O que fazer após 10 segundos, ou seja, inserir o iframe e remover a publicidade.
setTimeout(function(){
$("#left").empty();
$("#tempo").remove();
$("#left").append('<iframe width="100%" height="460" id="youtube-video" src=" https://www.youtube.com/embed/X2d3Q6jsADk?rel=0&autoplay=1&modestbranding=1&loop=1;controls=1&" frameborder="0" allowfullscreen=""></iframe>');
}, 10000);
}