Javascript conflict with beaver builder

Developers
1

Hi there,
I added a lightbox for a video on my page, but the javascript seems to be conflicting with beaver builder. So when I am in the editor view, top beaver builder menu disappears. If I remove the javascript and refresh the page, it appears.

Here is my code for reference.

<div id="lightbox">
    <div id="lightbox-content">
      <a id="close-btn">&times;</a>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/Ve-lX9FGfxE?si=ZQdvH6ml1Jq1xI-q&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
  </div>
<script>
const lightbox = document.getElementById('lightbox');
    const closeBtn = document.getElementById('close-btn');
    const image = document.querySelector('.lightbox-image');

    image.addEventListener('click', (event) => {
      event.preventDefault(); // Prevent default image link behavior
      lightbox.style.display = 'block';
    });

    closeBtn.addEventListener('click', () => {
      lightbox.style.display = 'none';
    });

    lightbox.addEventListener('click', (event) => {
      if (event.target === lightbox) { // Close lightbox on clicking outside
        lightbox.style.display = 'none';
      }
    });
</script>

Any ideas on how I can add this lightbox without the javascript conflicting with the builder?

2