(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
Solved! Go to Solution.
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
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
Ooh don't declare and reuse the same variable name here, you're getting lucky that old var even lets you do that.
Do you have a suggestion on how to achieve the action he is looking for?
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.
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:
Cheers
Jo
Thanks @Jo_Pitts1
Yes, I verified that is what he wants. I am trying to apply your suggestion.
--Tracy
(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&badge=0&autopause=0&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!
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