Start prezi iframe on click

Design help Webflow integrations
1

I have an embedded prezi iframe and I would like to start the prezi presentation by clicking on a custom div element not on the default thumbnail “Present” button. The prezi thumbnail and its Present button is unappealing so I need to cover it with an overlay image div. So on click, I have to :

  1. hide overlay image div (which works)
  2. start the iframe prezi presentation.

I would appreciate any advice. Thank you!

Here is the link:

https://preview.webflow.com/preview/andrass-blank-site-17ff0f?utm_medium=preview_link&utm_source=designer&utm_content=andrass-blank-site-17ff0f&preview=b337ca8e841fb5b777123ca0ca7baff5&mode=preview

2

Prezi created an API player and it might be the solution. Could anybody advise how to use this in webflow?
Here is the link: Sign in to GitHub · GitHub
Thank you.

3

Hey,

I took a look at the API, and after a couple tries I got the player + custom button working. I created an example page that you can take a look at. Let me know and I’ll delete your presentation from my page.

Here’s how it works: https://robin-g-experiments.webflow.io/experiments/prezi-player-api

Paste the following code before your body-tag in the page settings:

<script src="https://prezi.github.io/prezi-player/lib/PreziPlayer/prezi_player.js"></script>

<script>

// ID "prezi-player" for the presentation div
var player = new PreziPlayer('prezi-player', {
	preziId: 'dbvydxkfj99x', // This is the ID of your presentation
	width: 620,
	height: 444
});

// ID "prezi-btn" for the next button
document.getElementById("prezi-btn").onclick = function(e){
	e.preventDefault();
	player.flyToNextStep();
};

</script>

Then set the ID “prezi-player” to the div containing your presentation, and the ID “prezi-btn” to the button going to the next slide.

You can also add a previous-button and other things that I could take a look at tomorrow if you need help :slight_smile:

EDIT: I think I didn’t read the opening post correctly haha, you wanted an overlay for the presentation. I added a dark overlay with an opacity-interaction on both clicking the overlay, as well as the next button.

4

Hi Robin, Thanks so much! I tested your page and it does work! I will look at the details later tonight as I have other work and family commitments during the day (yes I know its Sunday). I will get back to you ASAP.

5

Again, thank you Robin.
I am posting another solution which is using prezi IDs from a CMS library. This solution is from Rishad Bharucha - thanks to Rishad!:

  1. Paste the below prezi player script into: Pages —" Inside <Head> tag"

    <script src="https://prezi.github.io/prezi-player/lib/PreziPlayer/prezi_player.js"></script>

and then,

  1. Paste the code below inside the HTML Embed field on your target div:

Before pasting, please note that this is CMS connected, so you have to Click Add Field + (purple link on the top right of the HTML Embed Code Editor) where the code indicates XXX (replacing XXX) and choose your CMS Field with your Prezi ID.

So the code is:

<div id='prezi-player-XXX'></div>

<script>
// ID "prezi-player" for the presentation div
var playerXXX = new PreziPlayer('prezi-player-XXX', {
	preziId: 'XXX', // This is the ID of your presentation
	width: 330,
	height: 222,
  controls: true
});
</script>