How to put a popup video link in an assignment?

[EllenSpertus]

When I create an External Link within a module and check "Load in a new tab", the created link does not navigate away from the current page (although it may create a new tab or window) when clicked.

How can I provide a video link in an assignment that behaves the same way? If I just add a link through the Canvas editor or in HTML, clicking on it navigates away from the assignment.

Thank you.

[FrankieJones11]

The HTML uses just some default bootstrap classes, including the boostrap responsive embed classes:

<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="text-center display-4 mt-5">
Solodev Web Design & Content Management Software
</h1>
<p class="text-center mt-5">
<a href="#headerPopup" id="headerVideoLink" target="_blank" class="btn btn-outline-danger popup-modal">See Why Solodev WXP</a>
</p>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

[DrNufer · Accepted solution]

There are not any out-of-the-box approaches for creating popup boxes, but if you're interested in exploring a little code then you may be able to incorporate an interesting effect.  Here is a way you can hide/show a video or element:

https://www.youtube.com/watch?v=MOiWzjd7AgM&t=797s

Here is how most people to popup boxes:

https://www.youtube.com/watch?v=exnDs8BXkTQ&t=290s