Yes. It is possible to stop videos with a click, even if the link box, or button has other interactions. Here is the solution:
Summery of solution: Stop video playing by unloading and reloading videos with with code.
PLEASE NOTE: I am NOT a programmer, I’m going to try to explain this as best I can, so if it isn’t clear please don’t judge too harshly - also no wacky conspiracy theories about the Jesuits please! If you need clarification, I’ll try to find out from the programmer who helpaed figure this out.
We needed to create a way to stop videos from playing when switching divs within a symbol that each contain multiple videos which users may have started playing.
Here is the working site: http://beajesuit.webflow.io, (when it launches you can find it here: www.beajesuit.org)
On the home page you’ll see a section called “Is God Calling You” with four vertically stacked buttons. (This element is a symbol that appears on all the other pages using the button “Your Discernment” on the sup-page main nav).
I needed to stop the videos with both the vertically stacked buttons on the right and the circular buttons within each section.
There is an HTML Embed at the bottom of the stack (above). Referencing the ID of each button and the ID of each video (note. the ID is on the video NOT the div containing the video). It unloads and reloads the video.
<script>
var StopVideo_Btn_01 = document.getElementById('GB-Link-1');
var StopVideo_Btn_02 = document.getElementById('GB-Link-2');
var StopVideo_Btn_03 = document.getElementById('GB-Link-3');
var StopVideo_Btn_04 = document.getElementById('GB-Link-4');
var StopVideo_Btn_05 = document.getElementById('GB1-crl_1');
var StopVideo_Btn_06 = document.getElementById('GB1-crl_2');
var StopVideo_Btn_07 = document.getElementById('GB1-crl_3');
var StopVideo_Btn_08 = document.getElementById('GB1-crl_4');
var StopVideo_Btn_09 = document.getElementById('GB2-crl_1');
var StopVideo_Btn_10 = document.getElementById('GB2-crl_2');
var StopVideo_Btn_11 = document.getElementById('GB2-crl_3');
var StopVideo_Btn_12 = document.getElementById('GB3-crl_1');
var StopVideo_Btn_13 = document.getElementById('GB3-crl_2');
var StopVideo_Btn_14 = document.getElementById('GB3-crl_3');
var StopVideo_Btn_15 = document.getElementById('GB4-crl_1');
var StopVideo_Btn_16 = document.getElementById('GB4-crl_2');
var StopVideo_Btn_17 = document.getElementById('GB4-crl_3');
function StopVideo() {
//GB Example
//document.getElementById('GB1-Video_0').innerHTML=''; //This always remains blank
//document.getElementById('GB1-Video_0').innerHTML='{iframe code here}'; //Video iFrame code
//GB1 Video 1
document.getElementById('GB1-Video_1').innerHTML='';
document.getElementById('GB1-Video_1').innerHTML='<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Ffast.wistia.net%2Fembed%2Fiframe%2Frzr3qsxfkk%3Ftwitter%3Dtrue&src_secure=1&url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2Frzr3qsxfkk&image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F840c14e0bfab4a417486ea63e8a6b9fbc7d7cc0f.jpg%3Fimage_crop_resized%3D960x540&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=wistia" scrolling="no" frameborder="0" allowfullscreen=""></iframe>';
//GB1 Video 2
document.getElementById('GB1-Video_2').innerHTML='';
document.getElementById('GB1-Video_2').innerHTML='<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F4uJU0atORJ4%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4uJU0atORJ4&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4uJU0atORJ4%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" frameborder="0" allowfullscreen=""></iframe>';
//GB2 Video 1
document.getElementById('GB2-Video_1').innerHTML=''; //This always remains blank
document.getElementById('GB2-Video_1').innerHTML='<iframe scrolling="no" frameborder="0" id="player" src="https://fast.wistia.net/embed/iframe/71xkse0xb5?pageUrl=http%3A%2F%2Fbeajesuit.webflow.io%2F&twitter=true" allowfullscreen="allowfullscreen" class="wistia_embed" name="wistia_embed" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen"></iframe>'; //Video iFrame code
//GB3 Video 1
document.getElementById('GB3-Video_1').innerHTML=''; //This always remains blank
document.getElementById('GB3-Video_1').innerHTML='<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Ffast.wistia.net%2Fembed%2Fiframe%2F12lef98hdi%3Ftwitter%3Dtrue&src_secure=1&url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2F12lef98hdi&image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F02f6be36ec85477eec6b2313d65e6543a707b7c8.jpg%3Fimage_crop_resized%3D960x540&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=wistia" scrolling="no" frameborder="0" allowfullscreen=""></iframe>'; //Video iFrame code
//GB4 Video 1
document.getElementById('GB4-Video_1').innerHTML=''; //This always remains blank
document.getElementById('GB4-Video_1').innerHTML='<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Ffast.wistia.net%2Fembed%2Fiframe%2Frs7fn9pahv%3Ftwitter%3Dtrue&src_secure=1&url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2Frs7fn9pahv&image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F3312fdb07d4a1b07cf4fd6c659fa48b7a1d67788.jpg%3Fimage_crop_resized%3D960x960&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=wistia" scrolling="no" frameborder="0" allowfullscreen=""></iframe>'; //Video iFrame code
//GB4 Video 2
document.getElementById('GB4-Video_2').innerHTML=''; //This always remains blank
document.getElementById('GB4-Video_2').innerHTML='<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Ffast.wistia.net%2Fembed%2Fiframe%2Fiwbthjlv7y%3Ftwitter%3Dtrue&src_secure=1&url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2Fiwbthjlv7y&image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F883cc7635937f45aeafb7468ff79589994e99025.jpg%3Fimage_crop_resized%3D960x960&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=wistia" scrolling="no" frameborder="0" allowfullscreen=""></iframe>'; //Video iFrame code
//GB4 Video 3
document.getElementById('GB4-Video_3').innerHTML=''; //This always remains blank
document.getElementById('GB4-Video_3').innerHTML='<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Ffast.wistia.net%2Fembed%2Fiframe%2F909dhfljql%3Ftwitter%3Dtrue&src_secure=1&url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2F909dhfljql&image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F9f17b0a7fb9cbc0201bc86d9f5700f4bc80f06e3.jpg%3Fimage_crop_resized%3D960x960&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=wistia" scrolling="no" frameborder="0" allowfullscreen=""></iframe>'; //Video iFrame code
}
StopVideo_Btn_01.onclick = StopVideo;
StopVideo_Btn_02.onclick = StopVideo;
StopVideo_Btn_03.onclick = StopVideo;
StopVideo_Btn_04.onclick = StopVideo;
StopVideo_Btn_05.onclick = StopVideo;
StopVideo_Btn_06.onclick = StopVideo;
StopVideo_Btn_07.onclick = StopVideo;
StopVideo_Btn_08.onclick = StopVideo;
StopVideo_Btn_09.onclick = StopVideo;
StopVideo_Btn_10.onclick = StopVideo;
StopVideo_Btn_11.onclick = StopVideo;
StopVideo_Btn_12.onclick = StopVideo;
StopVideo_Btn_13.onclick = StopVideo;
StopVideo_Btn_14.onclick = StopVideo;
StopVideo_Btn_15.onclick = StopVideo;
StopVideo_Btn_16.onclick = StopVideo;
StopVideo_Btn_17.onclick = StopVideo;
</script>
I think that covers it. Hope that helps.
Mark