How to load only if clicked

Question

I’m creating a video page, where it lists the last 10. Only this page is very heavy, because I have the codes of the videos and even using the hide/show feature it ends up loading all players.

I would like an idea so that in this button to show the video , this video code only clicked if. I thought about ajax, but I’m racking my brain here. Just complementing I do the query and back the urls-video

example

foreach ($query as $res)
{
    <div class="pre-spoiler">
        <input name="xs" type="button"  class="xs" onClick="
            if(this.parentNode.getElementsByTagName('div')[0].style.display != 'none')
            {
                this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; 
                this.value = 'Zuklappen'; 
            } else {
                this.parentNode.getElementsByTagName('div')[0].style.display = 'block'; 
                this.value = 'Aufklappen';
            }" value="Buttontext">

        <div class="spoiler" style="display: none;">
*****<?php echo $res['url-video']?>***=>aqui é o ponto, que so queria que ele carregasse se clicado no botao...
    </div>
}