My Cloud presentation looks too small on WordPress. What should I do?

When you embed a PowerPoint presentation uploaded to iSpring Cloud on a Wordpress site, it may look too small. For example, like this:

Let’s see how to resolve it.

Solution for desktop

You can easily fix this by editing the width and height parameters in the embed code and replacing percents with pixels. For example:

original:

<iframe src="https://pavelbender.ispringcloud.com/acc/zCrCliAzODk5/view/3899-BYPLX-AVT3M-9m1Wk/embedded?
from=embed&fit=1"frameborder="0" border="0" scrolling="auto" allowtransparency="true" allowfullscreen="1" style="border:
none; background-color: transparent; width: 100%; height: 100%;"></iframe>

modified*:

<iframe src="https://pavelbender.ispringcloud.com/acc/zCrCliAzODk5/view/3899-BYPLX-AVT3M-9m1Wk/embedded?
from=embed&fit=1" frameborder="0" border="0" scrolling="auto" allowtransparency="true" allowfullscreen="1" style="border:
none; background-color: transparent; width: 800px; height: 600px;"></iframe>

*Note that sometimes the maximum content width can be limited (depends on the WordPress theme).

Now your presentation should look better:

That’s great, but there’s another problem – fixed size means “not responsive” and, as we know, responsiveness is the key to the modern web experience (smartphones).

Solution for desktop + mobile

If you want your embedded presentation to look great across all devices, follow the steps below:

  1. Copy your presentation’s embed code from iSpring Cloud to a text editor (like Notepad)
  2. Delete the width and height parameters:
    before: transparent; width: 100%; height: 100%;">
    after: transparent;">

  3. Copy the text below and insert your embed code as shown:

    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow:
    hidden; max-width: 100%;}
    .embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }</style>
    <div class="embed-container">your Cloud embed code</div>

  4. Here's an example of how the result should look:

    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow:
    hidden; max-width: 100%;}
    .embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }</style>
    <div class="embed-container"> <iframe src='https://pavelbender.ispringcloud.com/acc/zCrCliAzODk5/view/3899-rtiLD-gHYGQ-Z3ZHn/embedded?from=embed&fit=1' frameborder='0' border='0' scrolling='auto' allowtransparency='true' allowfullscreen='1' style='border: none; background-color: transparent;'></iframe>
    </div>

  5. Open your WordPress post, switch to the Text mode, and copy-paste the code from your Notepad window

  6. Publish the post and enjoy the results

This should make your presentation look good on both desktop and mobile (orientation doesn’t matter).

Addition – grey bars:

Look at the code that you generated in step #5. Can you see the padding-bottom: 56.25% attribute?

<style>.embed-container { position: relative; padding-bottom: 56.25%; height:

This attribute is what determines the aspect ratio of your embed object, so if there are grey bars on the top/bottom or sides of your presentation, you need to change its value.

Here’s how it’s calculated:
padding-bottom = (presentation height / presentation width) * 100%

For example, let’s find it for 16:9:
padding-bottom = 9 / 16 * 100% = 56.25% - this where the default value comes from.

If you still have questions regarding the topic after reading the article, feel free to contact us.

Was this article helpful?

Thanks for your feedback!

How can we help you?

EMAIL
MESSAGE

Your request to iSpring has been submitted.

Please check your email for support replies. We reply to every message asap. If you don't hear back from us, check your spam folder and add to your list of approved senders.

Oops! Something went wrong...

Please contact them at .