Javascript conflict with beaver builder

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="" 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>
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 = 'block';

    closeBtn.addEventListener('click', () => { = 'none';

    lightbox.addEventListener('click', (event) => {
      if ( === lightbox) { // Close lightbox on clicking outside = 'none';

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