title: console error : Cannot read properties of null (reading 'addEventListener') every time page reloads
body: <p>So I've searched for ages and can't find anything to solve this problem with. I have a function for a modal that will show a YouTube video and everything works fine with the modal and the video.</p>
  <p>But every time my webpage reloads and if I go to another page on the site I get this error message in the console <code>&quot;Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')&quot;</code>. I've think that my script is trying to run even though I've haven't clicked the modal to open? I've tried adding <code>$(window).load(function(){}</code> function. But that did not solve the problem.</p>
  <p>Does anyone know how I can fix it or show me in the right direction?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function(){
     const close = document.querySelector('#close');
     const open = document.querySelector('#open');
     const modal_container = document.querySelector('#modal-container');
     var url = $('#seaspiracy').attr('src');
  
     $(window).load(function(){
       open.addEventListener('click', () =&gt; {
           modal_container.classList.add('show');
           $('#seaspiracy').attr('src', url);
           $("#seaspiracy").attr('src', url + "?autoplay=1&amp;amp;modestbranding=1&amp;amp;showinfo=0" ); 
  
       });
  
       close.addEventListener('click', () =&gt; {
           modal_container.classList.remove('show');
           $('#seaspiracy').attr('src', '');
       });
     });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="mst-section" id="about-section"&gt;
     &lt;div class="mst-row"&gt;
        &lt;div class="row"&gt;
           &lt;div class="mst-column-1"&gt;
              &lt;div class="mst-inner-column"&gt;
                 &lt;div class="about-img-box"&gt;
                    &lt;div class="about-img"&gt;&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div class="about-text-box"&gt;
                    &lt;div class="about-text"&gt;
                       &lt;h2&gt;&lt;/h2&gt;
                       &lt;p&gt;
                          &lt;span class="about-seaspiracy"&gt;&lt;button id="open"&gt;Seaspiracy&lt;/button&gt;&lt;/span&gt; 
                       &lt;/p&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="modal-container" id="modal-container"&gt;
        &lt;iframe id="seaspiracy" class="modal" loading="lazy" width="600" height="350" src="https://www.youtube.com/embed/1Q5CXN7soQg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
        &lt;button class="modal-close-btn" id="close"&gt;X&lt;/button&gt;
     &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>