Streaming live at 10am (PST)

I need the video to stop playing after the modal window is closed


#1

Here is the link to my site; https://webflow.com/design/bt-sport-employee-workflo-308c3a176214e#

I have spent more than 20 hours with a break, trying to figure out how to stop a embedded video playing from a modal.

Please can some please try to have a look at the code, and see where I am going wrong.


#2

Please @bartekkustra @cyberdave @thesergie , @danro , can you help me please.


#3

Hi @Ade_Adegoke

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: https://forum.webflow.com/t/posting-guidelines-for-the-code-help-category/6048

Thanks in advance! :slight_smile:


#4

Can't see the code to comment, but would a video lightbox not do the same job?


#5

Ive been told that you don't have much control using a Lightbox. In terms of design and coding


#6

Summery of solution: Stop video playing by unloading and reloading videos with with code.

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


34 AM

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&amp;src_secure=1&amp;url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2Frzr3qsxfkk&amp;image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F840c14e0bfab4a417486ea63e8a6b9fbc7d7cc0f.jpg%3Fimage_crop_resized%3D960x540&amp;key=96f1f04c5f4143bcb0f2e68c87d65feb&amp;type=text%2Fhtml&amp;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&amp;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&amp;src_secure=1&amp;url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2F12lef98hdi&amp;image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F02f6be36ec85477eec6b2313d65e6543a707b7c8.jpg%3Fimage_crop_resized%3D960x540&amp;key=96f1f04c5f4143bcb0f2e68c87d65feb&amp;type=text%2Fhtml&amp;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&amp;src_secure=1&amp;url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2Frs7fn9pahv&amp;image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F3312fdb07d4a1b07cf4fd6c659fa48b7a1d67788.jpg%3Fimage_crop_resized%3D960x960&amp;key=c4e54deccf4d4ec997a64902e9a30300&amp;type=text%2Fhtml&amp;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&amp;src_secure=1&amp;url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2Fiwbthjlv7y&amp;image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F883cc7635937f45aeafb7468ff79589994e99025.jpg%3Fimage_crop_resized%3D960x960&amp;key=96f1f04c5f4143bcb0f2e68c87d65feb&amp;type=text%2Fhtml&amp;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&amp;src_secure=1&amp;url=https%3A%2F%2Fjesuits.wistia.com%2Fmedias%2F909dhfljql&amp;image=https%3A%2F%2Fembed-ssl.wistia.com%2Fdeliveries%2F9f17b0a7fb9cbc0201bc86d9f5700f4bc80f06e3.jpg%3Fimage_crop_resized%3D960x960&amp;key=c4e54deccf4d4ec997a64902e9a30300&amp;type=text%2Fhtml&amp;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