Bootstrap модальное окно с ошибкой консоли iframe видео YouTube "Uncaught TypeError: Cannot read property 'postMessage"

Question

У меня есть модальное окно bootstrap, которое лениво загружает видео iframe YouTube через некоторый JavaScript, чтобы повысить скорость страницы. Все работает нормально, но я получаю консольную ошибку в Chrome, связанную с некоторым кодом JS, который приостанавливает и запускает видео, если модальное окно закрыто и / или повторно открывается. Сама ошибка появляется, когда вы нажимаете кнопку «Посмотреть видео», которая открывает модальное окно.

Uncaught TypeError: невозможно прочитать свойство postMessage из undefined ...

Как предотвратить ошибку консоли?

Этот код вызывает ошибку:

    $('#videoModal').on('shown.bs.modal', function (){$('.ytv').contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')});

    $('#videoModal').on('hidden.bs.modal', function (){$('.ytv').contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')});

Javascript

// Video Modal
    var div = document.getElementById("appVideoContainer");
    var span = div.getElementsByTagName("span")[0].contentWindow;

    $('#videoModalBtn').on("click", function(e) {
      e.preventDefault();
      $('#videoModal').modal('show');
    });

    $('#videoModalCloseBtn').on("click", 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('<iframe id="appVideo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen allowscriptaccess="always" class="embed-responsive-item ytv" src="' + $(this).data("yt-url") + '"></iframe>');
      });
    }


    //Pause + Play YT video if Modal is closed or opened
    $('#videoModal').on('shown.bs.modal', function() {
      $('.ytv')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
    });

    $('#videoModal').on('hidden.bs.modal', function() {
      $('.ytv')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
    });

HTML

 <!-- Video Modal -->
    <div class="modal fade video-modal" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" aria-label="Close" id="videoModalCloseBtn"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
            <div id="appVideoContainer" class="youtube-video-place embed-responsive embed-responsive-16by9 " data-yt-url="https://www.youtube.com/embed/XXZFco-1zpo?enablejsapi=1&rel=0&amp;showinfo=0&autoplay=1"><img src="https://echristo.com/wp-content/uploads/2019/07/service-1.jpg" async>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>