On Click module load

shadow42 — Tue, 19 Mar 2024 12:15:15 GMT

Hi,
When URL is hit in that case I don't want embedded Youtube video to load simultaneously when the page loads.

So I was thinking of creating a Module in such a way that when clicked on div then we could load the YouTube video on a pop-up or could replace the existing div with youtube embedded div.

the main objective is not to load the embedded YouTube code when the page is loading in order to load the page faster.

Is that possible?

Re: On Click module load

evaldas — Tue, 19 Mar 2024 16:12:41 GMT

Hi @shadow42

Yes, that is possible. You can create a module in HubSpot that triggers a popup when an element is clicked and only then the iframe would be loaded into the popup.

Basic HTML for this that includes the trigger and the popup:

<button id="openModal">Open Modal</button>  <div id="popupModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <div id="videoContainer"></div> </div> </div>

Some basic CSS to style the popup so that it's centered and has a close button:

.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { position: absolute; background-color: #fefefe; padding: 20px; border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }

Here is the javascript to tie it all together (replace the "VIDEO_ID_HERE" with the actual video ID)

document.getElementById('openModal').addEventListener('click', function() { let modal = document.getElementById('popupModal'); let videoContainer = document.getElementById('videoContainer'); videoContainer.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_HERE" frameborder="0" allowfullscreen></iframe>'; modal.style.display = 'block'; document.getElementsByClassName('close')[0].addEventListener('click', function() { modal.style.display = 'none'; videoContainer.innerHTML = ''; }); });

Hope this helps!

topic On Click module load in CMS Development

On Click module load

Re: On Click module load