title: Bootstrap modal with a YouTube video iframe console error "Uncaught TypeError: Cannot read property 'postMessage"
body: <p>I have a bootstrap modal that lazy loads an iframe YouTube video via some JavaScript to help with page speed. Everything works fine, but I get a console error in Chrome related to some JS code that pauses and starts the video if the modal is closed and/or reopened. The error itself shows up when you click the &quot;Watch Video&quot; button which opens the modal.</p>
  <p>Uncaught <em>TypeError: Cannot read property 'postMessage' of undefined</em> ...</p>
  <p>How do I prevent the console error?</p>
  <p>This code is causing the error:</p>
  <pre><code>    $('#videoModal').on('shown.bs.modal', function (){$('.ytv').contentWindow.postMessage('{&quot;event&quot;:&quot;command&quot;,&quot;func&quot;:&quot;playVideo&quot;,&quot;args&quot;:&quot;&quot;}', '*')});
  
      $('#videoModal').on('hidden.bs.modal', function (){$('.ytv').contentWindow.postMessage('{&quot;event&quot;:&quot;command&quot;,&quot;func&quot;:&quot;pauseVideo&quot;,&quot;args&quot;:&quot;&quot;}', '*')});
  </code></pre>
  <p>Javascript</p>
  <pre><code>// Video Modal
      var div = document.getElementById(&quot;appVideoContainer&quot;);
      var span = div.getElementsByTagName(&quot;span&quot;)[0].contentWindow;
  
      $('#videoModalBtn').on(&quot;click&quot;, function(e) {
        e.preventDefault();
        $('#videoModal').modal('show');
      });
  
      $('#videoModalCloseBtn').on(&quot;click&quot;, function(e) {
        e.preventDefault();
        $('#videoModal').modal('hide');
      });
  
  
      //Lazy loading YouTube embed for faster page load
      var video_wrapper = $('.youtube-video-place');
  
      //  Check to see if youtube wrapper exists
      if (video_wrapper.length) {
        // If user clicks on the video wrapper load the video.
        $('.youtube-video-place').on('click', function() {
  
          // Dynamically inject the iframe on demand of the user. Pull the youtube url and ID from the data attribute on the wrapper element.
          $('#' + this.id).html('&lt;iframe id=&quot;appVideo&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen allowscriptaccess=&quot;always&quot; class=&quot;embed-responsive-item ytv&quot; src=&quot;' + $(this).data(&quot;yt-url&quot;) + '&quot;&gt;&lt;/iframe&gt;');
        });
      }
  
  
      //Pause + Play YT video if Modal is closed or opened
      $('#videoModal').on('shown.bs.modal', function() {
        $('.ytv')[0].contentWindow.postMessage('{&quot;event&quot;:&quot;command&quot;,&quot;func&quot;:&quot;playVideo&quot;,&quot;args&quot;:&quot;&quot;}', '*')
      });
  
      $('#videoModal').on('hidden.bs.modal', function() {
        $('.ytv')[0].contentWindow.postMessage('{&quot;event&quot;:&quot;command&quot;,&quot;func&quot;:&quot;pauseVideo&quot;,&quot;args&quot;:&quot;&quot;}', '*')
      });
  </code></pre>
  <p>HTML</p>
  <pre><code> &lt;!-- Video Modal --&gt;
      &lt;div class=&quot;modal fade video-modal&quot; id=&quot;videoModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;videoModalLabel&quot;&gt;
        &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; aria-label=&quot;Close&quot; id=&quot;videoModalCloseBtn&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              &lt;div id=&quot;appVideoContainer&quot; class=&quot;youtube-video-place embed-responsive embed-responsive-16by9 &quot; data-yt-url=&quot;https://www.youtube.com/embed/XXZFco-1zpo?enablejsapi=1&amp;rel=0&amp;amp;showinfo=0&amp;autoplay=1&quot;&gt;&lt;img src=&quot;https://echristo.com/wp-content/uploads/2019/07/service-1.jpg&quot; async&gt;
                &lt;span&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>