Landing page vimeo video plays after form fill

[Tracy_Boesken]

(I posted under another thread but thought I would revive it in a new post.)

"...is there a way we can embed the video on LP and it plays only after form is filled?

Form can be on top of thumbnail or message can popup asking to fill the form."

Currently, I have the "watch now" button with the vimeo follow-up url. The way the thumbnail is placed on the landing page the video starts playing upon click.

How do I make the video only play after the form fill? Do you suggest turning off form fill for known visitors?

Thanks,

--Tracy

[Jo_Pitts1]

@Tracy_Boesken ,

why not display a 'fake' thumbnail prior to form fill (i.e. just an image that has nothing clickable etc).

On a successful form submit, hide the fake thumbnail, show the video, and play away.

Some code along these lines would work:

<script>
MktoForms2.whenReady(function(form) {
    form.onSuccess(function(vals, thankYouURL) {
      var x = document.getElementById("myVideoForRealDiv");
      x.style.display = "block";
      var x = document.getElementById("myVideoThumbnailDiv");
      x.style.display = "none";
      return false;
    });
});
</script>

Put your image of the video in the myVideoThumbnailDiv (and set it to hidden by default)

Put the actual video in the myVideoForRealDiv (and set it to display by default)

Cheers

Jo

[SanfordWhiteman]

Ooh don't declare and reuse the same variable name here, you're getting lucky that old var even lets you do that.

[Tracy_Boesken]

@SanfordWhiteman 

Do you have a suggestion on how to achieve the action he is looking for?

[Tracy_Boesken]

@Jo_Pitts1 

The fake thumbnail is how we have done it in the past and just had the form fill's submit button follow up to the URL to play the video.

I think what he wants is someone to click on the thumbnail, the form appears and then disappears when filled and video played.

[Jo_Pitts1]

OK, so you need to move from 'I think' to 'I know', otherwise we're trying to come up with solutions without a known requirement.  usually that is called 'guessing' :).

If what you think is correct:

• Have a click event on the image.  When it is clicked, hide the image and display the form.  
• Use the code I supplied previously to hide the form, and display the video.

Cheers

Jo

[Tracy_Boesken]

Thanks @Jo_Pitts1 

Yes, I verified that is what he wants. I am trying to apply your suggestion.

--Tracy

[Jo_Pitts1]

@Tracy_Boesken ,

best of luck.  If I can help further, put your hand up 🙂

Cheers

Jo

[Tracy_Boesken]

@Jo_Pitts1 

(This is my hand up!) I placed this html block in my landing page:

<script>
MktoForms2.whenReady(function(form) {
form.onSuccess(function(vals, thankYouURL) {
var x = document.getElementById("https://player.vimeo.com/video/617208817?h=89542b1b4b&amp;badge=0&amp;autopause=0&amp;player_id=0&am...");
x.style.display = "block";
var x = document.getElementById("https://info.edifecs.com/rs/183-PWY-190/images/webinar thumbnail Screenshot 2021-10-08 140029.png");
x.style.display = "none";
return false;
});
});
</script>

But I am missing something...where do I designate the form that pops up? Should I set it so the form doesn't show for known visitors?

Thanks so much for your help!

[Jo_Pitts1]

@Tracy_Boesken ,

can you send a link to the page.  If you don't want it in the public eye, you can send it as a private message.

My gut says you need some divs or similar on your page to hold the various elements.

You still need to load the form as per normal somewhere.

Cheers

Jo