Posted on Leave a comment

How to Embed Prezi with a Responsive Player

how-to-embed-prezi-responsive-player-tutorial


So you need to embed a Prezi into your website as responsive? This would mean that the Prezi player would adapt to your website instead of staying static like it does with the default embed code. Making the embedded Prezi player responsive is actually quite simple. Here is the default embed code for a Prezi (notice that the width and height are statically defined numbers in the code):

<iframe id="iframe_container" src="https://prezi.com/embed/unnzdqohddqo/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0&amp;PARENT_REQUEST_ID=397373380c11255e#" width="500" height="460" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

To make it responsive, simply change the width value to 100% like that width=”100%”. So depending on the coding of your website, the embedded Prezi will always stay 100% wide and will adapt to the browser width of the user. You can leave the height attribute to somewhere between 300-500, however this depends on your Prezi and how you would want it to look.

Want to test it? Below is a Prezi Template embedded with 100% width and 460 height, resize your browser window and you will notice the player resizing automatically:

Please not that this is not an official way of embedding a responsive Prezi. There are many other ways to embed Prezi as responsive via CSS, which might be more correct, however this is the most simple and quickest way, and it does the trick most of the times!


Found this article useful? Sharing is caring!

Share

Leave a Reply