javascript - 模态弹出窗口在桌面上打开视频，但在触摸屏设备上打开应用程序

Question

我已经构建了一个 anchor ，单击该 anchor 即可以模式播放视频。但是，在触摸屏设备上，当我单击按钮时，它会打开 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 here

编辑:不确定演示为何打开模式。该模式在 fiddle 中工作。

Answer 1

如果您在 html 页面中放入一个指向 youtube 的链接，其中 HREF="htts://youtube.com/..."

在桌面浏览器上将导航到 youtube 页面，HREF 是故障恢复，但 magnific-popup jquery 插件会将链接转换为模态开放解决方案(但是对我来说不起作用，可能该库是已过时，因为 YouTube 更新了某些内容)。

但在手机或平板电脑上会要求用户打开 Youtube 应用程序的链接。这是因为链接是由意图系统处理的。这发生在处理任何 js 代码之前。

您的情况的行为是相同的，因为您使用了之前针对故障恢复解决方案所述的 HREF:

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

编辑:

底线:在这种情况下，似乎为手机使用 magnific-popup 插件是一个坏主意，除非存在更新版本(如果可用且兼容)，而不是使用带有 iframe 的隐藏 div(样式为 display:none;)到youtube给出的共享代码(更新的)，并在链接中删除该类并将href更改为显示隐藏div的javascript代码。

这是一个示例(似乎 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>