Replace image with iframe

[alvenimpact]

I was trying to put iframe from multiple source, and I come across this great guide .

It’s working all good, but I need some modification, instead of blank iframe, I want to replace it with image, I will design the play button later.

So if we click the play button in the image, it will load the iframe from source 1. If we click on iframe source, it will do the same thing, remove image/hide image and load the iframe from source.

If we load the iframe while the page load, the page become slow. If we put blank iframe, the visitor confused, why there’s blank empty space in the site. If we don’t put visibility on the iframe, visitor might not notice the button to load the iframe.

That’s why I plan to use image, and design the play button later to lure the visitor into clicking them, and make them notice there’s iframe video player here.

Currently, my simple code just like this

<iframe name="videoplayer" id="video-player" src="image-url" scrolling="no"></iframe>

<a href="embed1" target="videoplayer" class="klik">Embed1</a>
 <a href="embed2" target="videoplayer" class="klik">Embed2</a>

Javascript
$(".klik").click(function (e) {

        e.preventDefault();

        $("#video-player").attr("src", $(this).attr("href"));

    })

I also plan to add pre-roll ads if possible, and add loading animation while switching iframe, because the embed taking too long to load, and it seems stuck.
Thanks