javascript - Bootstrap MODAL - 如何在没有弹出窗口的情况下在移动设备中打开 YouTube？

Question

MODAL 默认情况下在移动设备中激活普通弹出窗口，这会干扰 iOS\Android UX 的工作方式。

如何\我应该在代码中添加什么，以便在 Mobile 中它不会使用 Modal 而只是打开 YouTube 视频？

10x 寻求帮助乌迪

<a href="javascript:changeVideo('e80BbX05D7Y')"><button class="main-btn">Watch</button></a>

<script>
$(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
     $("#iframeYoutube").attr("src","#");
  })
})

function changeVideo(vId){
   var iframe=document.getElementById("iframeYoutube");
   iframe.src="https://www.youtube.com/embed/"+vId+"? 
   modestbranding=1&rel=0&showinfo=0";

   $("#myModal").modal("show");
}
</script>

Answer 1

必须用js检测手机浏览器。您可以使用mobile-detect.js来做到这一点.

如果您像这样更新代码，它就会起作用。

<a href="javascript:changeVideo('e80BbX05D7Y')"><button class="main-btn">Watch</button></a>

<script>

var mobileDetect = new MobileDetect(window.navigator.userAgent);

$(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
     $("#iframeYoutube").attr("src","#");
  })
})

function changeVideo(vId){
   var iframe=document.getElementById("iframeYoutube");
   iframe.src="https://www.youtube.com/embed/"+vId+"? 
   modestbranding=1&rel=0&showinfo=0";

if (mobileDetect.mobile()) {
    window.location = "https://www.youtube.com/watch?v=" + vId;
return;
  }

   $("#myModal").modal("show");
}
</script>