New Participant

Solved

Landing page vimeo video plays after form fill

Forum|Forum|4 years ago
October 7, 2021
1 reply
4902 views

(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

Marketo

Best answer by Jo_Pitts1

@Jo_Pitts1

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

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!

@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

Jo_Pitts1

Community Manager

@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

New Participant

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

Tracy_BoeskenAuthor

New Participant

@sanfordwhiteman

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded