SOLVED

Landing page vimeo video plays after form fill

Go to solution
Tracy_Boesken
Level 3

Landing page vimeo video plays after form fill

(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."

 

Tracy_Boesken_0-1633568197292.png

 

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

1 ACCEPTED SOLUTION

Accepted Solutions
Jo_Pitts1
Level 8

Re: Landing page vimeo video plays after form fill

@Tracy_Boesken ,

there are possibly more elegant solutions, but this is what ended up working

 

<script src="//info.edifecs.com/js/forms2/js/forms2.min.js"></script>

<div id="myThumbnailDiv" style="display: block;">
  <img ID="thumbnailImage" width="760" src="https://info.edifecs.com/rs/183-PWY-190/images/webinar thumbnail Screenshot 2021-10-08 140029.png" onclick="moveToNextStep()">
</div>
 
<div id="myFormDiv" style="display: none;">
</div>

<div id="myVideoDiv" style="display: none;">
    <iframe title="vimeo-player" src="https://player.vimeo.com/video/617208817?h=89542b1b4b" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
  </div>

<script>
/* This code makes the thumbnail hide, and the form appear */
function moveToNextStep() {
    var formContainer = document.getElementById("myFormDiv");
    var thumbnailContainer = document.getElementById("myThumbnailDiv");

    formContainer.style.display = "block";
    thumbnailContainer.style.display = "none";
  }
</script>

<script>
/* This code moves the form into the form Div, makes for form disappear on submission and makes the video div appear*/
MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0];
  var formContainer = document.getElementById("myFormDiv");
  var videoContainer = document.getElementById("myVideoDiv");

  formContainer.appendChild(formEl);
  form.onSuccess(function(vals,thankYouURL){
    videoContainer.style.display ="block";
    formContainer.style.display ="none";

    return false;
  });
});
</script>

 

 

Hopefully that gets you to the next step in your project.

Cheers

Jo

View solution in original post

12 REPLIES 12
Jo_Pitts1
Level 8

Re: Landing page vimeo video plays after form fill

@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
Level 10 - Community Moderator

Re: Landing page vimeo video plays after form fill

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
Level 3

Re: Landing page vimeo video plays after form fill

@SanfordWhiteman 

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

Tracy_Boesken
Level 3

Re: Landing page vimeo video plays after form fill

@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
Level 8

Re: Landing page vimeo video plays after form fill

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
Level 3

Re: Landing page vimeo video plays after form fill

Thanks @Jo_Pitts1 

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

--Tracy

Jo_Pitts1
Level 8

Re: Landing page vimeo video plays after form fill

@Tracy_Boesken ,

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

Cheers

Jo

Tracy_Boesken
Level 3

Re: Landing page vimeo video plays after form fill

@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
Level 8

Re: Landing page vimeo video plays after form fill

@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