# Javascript conflict with beaver builder

**URL:** <https://community.wpbeaverbuilder.com/t/javascript-conflict-with-beaver-builder/18658>\
**Category:** Developers\
**Tags:** beaver-builder\
**Created:** [June 13, 2024, 8:47pm UTC](https://community.wpbeaverbuilder.com/t/javascript-conflict-with-beaver-builder/18658 "2024-06-13T20:47:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jast-vendasta](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/j/82dd89/32.png) [@jast-vendasta](https://community.wpbeaverbuilder.com/u/jast-vendasta)\
**Post date:** [June 13, 2024, 8:47pm UTC](https://community.wpbeaverbuilder.com/t/javascript-conflict-with-beaver-builder/18658/1 "2024-06-13T20:47:55Z")

</div>

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.

```auto
<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?

---

<div class="post-metadata">

**Author:** ![pross](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pross/32/883_2.png) [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Post date:** [June 14, 2024, 11:25am UTC](https://community.wpbeaverbuilder.com/t/javascript-conflict-with-beaver-builder/18658/2 "2024-06-14T11:25:43Z")

</div>

> **[Safe Mode | Beaver Builder Knowledge Base](https://docs.wpbeaverbuilder.com/beaver-builder/troubleshooting/debugging/safe-mode/#fl-safe-shortcode)**
>
> You published or saved a page in Beaver Builder, and now you can't open it for