How to stop video playing after interaction

Design help Custom code
1

Hi support gurus

I have created a Lead Capture page that has a video that can be played by the visitor.

I have tried this using multiple sources for the video.

The issue I have is that if the visitor clicks the more info button the opt-in form appears but the video keeps playing in the background!

I read all about this happening in a modal window and know that it is possible to control with some script.

Can anyone help me fix this for the scenario above

Here is the share link: https://preview.webflow.com/preview/lcpelite1-2step?preview=c8c2652e6763eabed41cf3ca3e8e79da

Live site : http://lcpelite1-2step.webflow.io/

Thanks in advance

Paul

2

To control videos the way you want, you need to use either Vimeo or Youtube API.

It’s not a beginners’ task actually. You need to use their API along with Javascript code in order to control playback, or multiple videos.

3

Thanks Vincent.

Then I guess I will look at something else!

I do not have time to learn how to do this at this time!!

Thanks again

Paul

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

6

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.

36 AM
36 AM928×302 258 KB

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