Load content only upon element being clicked

[fxground]

Hello, just wondering out of the box, no custom coding - is it possible with an element (not sure which one I would be using to do this) load some content only after a user clicks something on the screen?

Goal, have a user click a button or something and only then would the youtube embed load so it doesn’t slow down the load time…

Does something like that exist and currently built in?

Eg of this is a link in the secure note. And i’m using custom javascript to do this … just trying to avoid doing it this way if there is already a built in way?

document.getElementById("playVideo").onclick = function() {
var iframe = document.getElementById("myIframe");
iframe.src = "https://www.youtube.com/embed/#####?autoplay=1"; 
iframe.style.display = "";
this.style.display = "none";
};

And then i’m just creating a button with the id “playVideo” etc.

[tristup]

Hi @fxground,

Thanks for reaching out.
There is no way to load the video with a click of a button. You need to use the custom JavaScript, which can load the video dynamically after clicking on a button.

Thanks

[fxground]

thank you, just wanted to know i was doing it the best way. thx again.

[prakash_s]

Hello @fxground,

You are most welcome, In order to open a video on the button click I would suggest you please add a Modal element where you can insert the video element. In case you have not seen the doc of the video element and modal element please have a look at it to learn more about how to open a video on button click event.

Video | Themeco Docs

Modal | Themeco Docs

Hope it helps
Thanks

[fxground]

Thanks, i’ve been playing around with this in the last couple days. It appears even if you use a modal with a video element, all of the youtube javascript gets loaded on page load even before the modal was clicked.

Is there a way to basically hide the video until after the page has loaded ,and it would then load the content needed when the modal button is clicked?

[ruenel]

Hello @fxground,

When the container like the Modal element is not displayed on the page, any element that is inside it is hidden away as well. The video will not be played and will only appear once the modal is triggered.

Thanks.

[fxground]

Thanks for confirming!

[prakash_s]

You are most welcome @fxground