视频模式，只需点击两次即可播放手机

Question

我有一个模态显示视频，可以在桌面上正常工作。当我在移动设备上查看时，我单击了按钮以打开模式，但是直到再次单击该页面，视频才会显示。此页面上有一些旧代码，想知道CSS媒体查询是否引起此问题？

$('.videoModalTrigger').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var playInModalMobile = window.innerWidth < 767 && _bcConfig.mobile.playsInModal,
    playInModalDesktop = window.innerWidth >= 767 && _bcConfig.desktop.playsInModal;

  if (playInModalMobile || playInModalDesktop) {
    _loadSingleVideoModal(this);
  } else {
    var $parentContainer = $(this).closest('.inline-mobile-video'),
      videoTag = $parentContainer.find('video-js')[0];

    var videoLoadedCallback = function() {
      var videoId = videoTag.id,
        bcPlayer = videojs.getPlayer(videoId);

      bcPlayer.play();

      $parentContainer.addClass('showPlayer');
    };

    if (_isVideoInitialized($(videoTag))) {
      videoLoadedCallback();
    } else {
      _initIndividualVideo(videoTag, videoLoadedCallback);
    }
  }
});

 @media all and (max-width: 767px) {
   .inline-mobile-video {
     &.showPlayer {
       .video-js.mobile {
         display: block;
         opacity: 1;
       }

       .videoModalTrigger {
         display: none;
       }
     }
   }
 }

<div class="play-button-column">
  <a class=“video”Trigger href="#" data-videoid=“555000” data-class="video-js">
    <span class="btn-text">Play Video</span>
  </a>
</div>