On Click module load

[shadow42]

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?

[evaldas · Accepted solution]

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:

<!-- the button is the trigger here but you can update it to be a div, as long as it has the appropriate ID -->
<button id="openModal">Open Modal</button>

<!-- the popup -->
<div id="popupModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</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!