How to load only if clicked

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

I would like an idea for this button to show the video, this video code only loads if clicked. I thought about ajax , but I'm breaking my head here .. Only by complementing do query and return 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>
}