Bootstrap MODAL - how to open YouTube in mobile without the pop?

MODAL by default activate in mobile the ordinary pop up windows, which interfear with how iOSAndroid UX is working.

HowWhat should i added to the code so that in Mobile it will not use Modal but just open the youtube video?

10x for the help
Udi

<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>


1 Answer
1

You must detect mobile browser with js. You can do this with mobile-detect.js.

If you update your code like this, it will works.

<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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.