Модальное всплывающее окно открывает видео на рабочем столе, но на устройствах с сенсорным экраном открывает приложение

Question

Я построил якорь, который при клике воспроизводит видео в модальном режиме. Однако на устройствах с сенсорным экраном, когда я нажимаю кнопку, открывается приложение YouTube (я просто хочу, чтобы оно открывалось в модальном режиме).

Не знаю, почему у меня такое поведение, как у меня определены любые стили, связанные с мультимедиа или сенсорным экраном, или JS?

Демо:

$(document).ready(function() {
  $('.popup-youtube').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,

    fixedContentPos: false
  });
});

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.ambiantHero--video {
  position: relative;
  top: 0px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ambiantHero--video .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.ambiantHero--video .container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 40px;
}
.ambiantHero--video .container .ambiantHero__content {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ambiantHero--video .container .ambiantHero__content a.heroButton {
  border: 0 solid #ffffff;
  background-color: #ffffff;
  padding: 10px 35px;
  color: #36383d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<div class="ambiantHero--video">
  
  <div class="overlay"></div>
  

  <div class="container">
    <div class="ambiantHero__content">
      <p>On button click, I want the modal to appear. With my current approach, on touch screen devices, button click just opens the YouTube app (not the modal popup)</p>
      
      <a class="popup-youtube heroButton" href="https://www.youtube.com/watch?v=ZDPE-NronKk">
        Open video modal
      </a>
      
    </div>
    
  </div>

  
</div>

JSFiddle здесь

Редактировать : Не знаете, почему демо открывает покадрово. Модал работает на скрипке.

Answer 1

Если вы добавите на страницу html ссылку на YouTube с помощью HREF = "htts: //youtube.com / ..."

В браузере на рабочем столе перейдите на страницу YouTube, HREF - возврат, но плагин magnifi c -popup jquery преобразует ссылку в решение, открытое модально (однако у меня не работает, вероятно, библиотека устарела, потому что youtube что-то обновил).

Но на мобильном телефоне или планшете попросит пользователя открыть ссылку с приложением Youtube. Это потому, что ссылки обрабатываются системой намерений. Это происходит до того, как обрабатывается любой код js.

Поведение такое же, как в вашем случае, потому что вы используете HREF, как описано выше для решения восстановления после сбоя:

  <a class="popup-youtube heroButton" href="https://www.youtube.com/watch?v=ZDPE-NronKk">
    Open video modal
  </a>

РЕДАКТИРОВАТЬ :

Итог: в этом случае кажется, что использовать плагин magnifi c -popup для мобильных телефонов - плохая идея, если только не существует обновленной версии (если она доступна и совместима), вместо этого используйте скрытый div ( стиль с отображением: нет;) с iframe к коду обмена, предоставленному youtube (обновленному), и в ссылке удалите класс и измените href на javascript код, который показывает скрытый div.

Вот пример (кажется, что YouTube заблокирован из-за межсайтовых политик).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:void(0)" onclick="$('#iframe1').show()">Open video modal 1</a>

<div id="iframe1" style="display:none;">
  <!-- here starts youtube embed code -->
  <iframe width="853" height="480" src="https://www.youtube.com/embed/ZDPE-NronKk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <!-- here ends youtube embed code -->
</div>