Watch Youtube Iframe video time inserted with append?

Question

I have inserted a button that when it is pressed, the advertising appears ahead and only then the video gives append, but with this I can not declare the Youtube API script, I think that is the mistake. I tried to copy the API code present on the site but it did not work, maybe because iframe does not exist when it is loaded. 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&amp;autoplay=1&amp;modestbranding=1&loop=1;controls=1&amp;" frameborder="0" allowfullscreen=""></iframe>');
        }, 10000);
}