How to Embed SlideShare Presentations in Your Website or Blog

Embedding a SlideShare presentation in your website is one of the best ways to share content without making visitors download anything. They see the slides right on your page, scroll through at their own pace, and stay on your site the whole time.

This guide covers everything: how to get the embed code, how to add it to different platforms, how to make it responsive on mobile, and how to fix the most common problems.

Step 1: Get the Embed Code From SlideShare

Before you can embed anything, you need the embed code. Here's how to get it.

1. Go to SlideShare and open the presentation you want to embed. It can be yours or someone else's (as long as it's public).
2. Below the presentation player, look for the share options. You'll usually see a row of icons or buttons.
3. Click the "Embed" button or icon. It looks like angle brackets (<>) on some versions.
4. A popup or dropdown will appear showing the embed code. It looks something like this:

   <iframe src="https://www.slideshare.net/slideshow/embed_code/key/XXXXXXXXXXX" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px;" allowfullscreen></iframe>

5. Copy the entire code block.

Note: Not all presentations have embedding enabled. If you don't see an embed option, the presenter may have disabled it, or the presentation may be private.

Step 2: Embed in HTML (Static Sites)

If you're working with a hand-coded HTML site or any platform that lets you paste raw HTML, this is the most direct method.

1. Open your HTML file or the HTML editor in your website builder.
2. Find the place in your page where you want the presentation to appear.
3. Paste the embed code you copied from SlideShare.
4. Save and preview.

Basic embed example:

<!-- SlideShare Presentation -->
<div class="slideshare-container">
    <iframe src="https://www.slideshare.net/slideshow/embed_code/key/XXXXXXXXXXX"
            width="597"
            height="486"
            frameborder="0"
            allowfullscreen>
    </iframe>
</div>

The default width and height values (597x486) work fine for desktop but won't adapt to mobile screens. See the responsive section below to fix that.

Step 3: Embed in WordPress

WordPress is the most common CMS, so let's cover it in detail. There are two ways: the simple paste method and the manual embed method.

Method A: Paste the URL (Simplest)

In the WordPress block editor (Gutenberg):

1. Open the page or post editor.
2. Click the "+" button to add a new block.
3. Search for "Embed" and select the Embed block.
4. Paste the full SlideShare URL (not the embed code) into the URL field.
5. Click "Embed."
6. WordPress will automatically convert the URL into an embedded player.

WordPress has built-in oEmbed support for SlideShare. If the automatic detection works, this is the cleanest approach.

Method B: Custom HTML Block

If the automatic oEmbed doesn't work or you want more control:

1. In the block editor, add a "Custom HTML" block.
2. Paste the full embed code (the iframe code from SlideShare).
3. Click "Preview" to check how it looks.
4. Save or Update the page.

Method C: Classic Editor

If you're using the older Classic editor:

1. Switch to the "Text" tab (not the Visual tab).
2. Paste the embed code where you want it to appear.
3. Switch back to Visual to preview.
4. Publish or Update.

Important: Never paste embed code in the Visual tab. WordPress will treat HTML tags as text and display them literally instead of rendering the embed.

Step 4: Embed in Wix

1. Log into your Wix dashboard and open the page editor.
2. Click the "+" Add button on the left panel.
3. Go to Embed → Embed a Widget.
4. Select "Embed HTML" from the options.
5. A white box will appear on your page. Click "Enter Code."
6. Paste the SlideShare embed code into the HTML editor.
7. Click "Apply."
8. Resize and reposition the embed element on your page.
9. Publish your site.

Wix tip: The embed element in Wix has fixed dimensions set in the editor. Adjust the element's height and width using the Wix drag handles, not just the iframe attributes in the code. Mismatches between the two can cause scrollbars or cutoff content.

Step 5: Embed in Squarespace

1. Open the Squarespace page editor.
2. Click the area where you want to add the presentation, then click the "+" to insert a new block.
3. Select "Embed" from the block options (it may be labeled "External" or show a link icon).
4. A dialog will appear. Paste the SlideShare URL into the URL field first — Squarespace will try to auto-embed it.
5. If auto-embed works, you're done. If not, look for a "Code" or "Embed Code" option and paste the iframe code directly.
6. Click "Apply" or close the dialog and preview.

Squarespace tip: In some Squarespace templates, the embed block has a maximum width that matches your site's content column. The presentation will be constrained to that width, which is usually fine for responsiveness.

Making SlideShare Embeds Responsive

By default, the SlideShare embed code uses fixed pixel dimensions (typically 597x486). This means on a mobile screen the embed might be too wide, forcing the user to scroll horizontally — a bad experience.

The fix is to wrap the iframe in a responsive container using CSS.

Responsive embed code:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
    <iframe
        src="https://www.slideshare.net/slideshow/embed_code/key/XXXXXXXXXXX"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #CCC;"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

How this works:

• The outer div uses padding-bottom: 56.25% to maintain a 16:9 aspect ratio (56.25% = 9/16 × 100).
• The iframe is positioned absolutely to fill the div.
• The iframe width and height are set to 100% so it scales with the container.
• max-width: 100% on the outer div prevents it from exceeding the screen width.

For presentations with a 4:3 aspect ratio (the older SlideShare format), use padding-bottom: 75% instead.

Customizing the Embed Size

If you don't need full responsiveness and just want to set a specific size, edit the width and height attributes in the embed code:

<!-- Larger embed for desktop-focused pages -->
<iframe src="https://www.slideshare.net/slideshow/embed_code/key/XXXXXXXXXXX"
        width="800"
        height="600"
        frameborder="0"
        allowfullscreen>
</iframe>

<!-- Smaller embed for sidebar use -->
<iframe src="https://www.slideshare.net/slideshow/embed_code/key/XXXXXXXXXXX"
        width="400"
        height="325"
        frameborder="0"
        allowfullscreen>
</iframe>

Keep the aspect ratio consistent. The original presentation is typically in either 4:3 (width:height = 4:3, so 800x600) or 16:9 (800x450). Distorting the aspect ratio makes slides look stretched or squashed.

Adding a Title and Attribution

SlideShare's default embed code includes attribution text below the player (showing the presenter's name and a link back to SlideShare). This is good practice and required by SlideShare's terms of service.

If you're embedding your own presentation, you might want to add a title above the embed:

<div class="presentation-wrapper">
    <h3>Q3 Marketing Strategy — Company Name</h3>
    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
        <iframe
            src="https://www.slideshare.net/slideshow/embed_code/key/XXXXXXXXXXX"
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
            frameborder="0"
            allowfullscreen>
        </iframe>
    </div>
    <p style="font-size: 0.85em; margin-top: 8px;">View the full presentation on <a href="YOUR_SLIDESHARE_URL">SlideShare</a>.</p>
</div>

Troubleshooting Common Embedding Problems

Problem: The embed shows a blank white box

Possible causes and fixes:

• The presentation was deleted or made private since you copied the embed code. Verify the presentation is still public by visiting the SlideShare URL directly.
• Your website blocks third-party iframes. Check your site's Content Security Policy (CSP) settings and ensure slideshare.net is whitelisted.
• Ad blockers or privacy extensions in the viewer's browser may block the iframe. This is the user's end and you can't control it — but you can add a fallback link.

Problem: The embed is there but doesn't fit the page

Fix: Use the responsive wrapper code shown above. The fixed-width default code often overflows on mobile and in narrow column layouts.

Problem: Slides look blurry or low resolution

Cause: This is a SlideShare platform issue, not your embed code. The embedded player uses the same resolution as SlideShare's viewer. If the original upload was low resolution, the embed will be too.

Workaround: If this is your own presentation, re-upload a higher resolution version. For others' presentations, nothing you can do about it on your end.

Problem: The embed works but shows a border I don't want

Fix: Add border: none; or border: 0; to the iframe style, and remove frameborder="0" if it's conflicting:

<iframe src="..." style="border: none; ..." frameborder="0" ...></iframe>

Problem: The embed code won't paste correctly in my WordPress editor

Fix: Make sure you're pasting into the HTML/Text view, not the Visual/WYSIWYG view. In Gutenberg, use the Custom HTML block. In Classic Editor, use the Text tab.

Problem: I see an error saying "SlideShare does not support embedding from this domain"

Cause: SlideShare has domain restrictions on some content.

Fix: Try using the direct SlideShare URL embed method (paste just the URL, not the iframe code) and let your platform's oEmbed handler deal with it. Some platforms have better handling of SlideShare's domain policies.

Privacy Note

When you embed a SlideShare presentation, visitors to your page will be loading content from SlideShare's servers. This means SlideShare may set cookies and track user behavior. If your site has a privacy policy or cookie notice, you may want to mention that embedded third-party content is present.

There's no easy technical workaround for this — it's inherent to how iframes work. If data privacy is critical, consider downloading the presentation using SaveSlide, converting it to PDF with our PPT to PDF tool, and hosting the PDF on your own server instead.

Alternatives to Embedding

Embedding from SlideShare isn't always the right choice. Here are alternatives:

• Embed from Google Slides: File → Publish to Web → Embed. Generates an iframe with similar functionality but hosted on Google's infrastructure.
• Self-hosted PDF viewer: Download or convert the presentation to PDF, upload it to your server, and use a JavaScript PDF viewer like PDF.js to display it inline.
• Static images: Export each slide as an image and display as an image gallery. More control over appearance, but loses the slideshow format.
• Link only: Sometimes the simplest approach is best. A clear call-to-action link that says "View the full presentation on SlideShare" takes users directly to the content without the complexity of embedding.

For more tools to manage, download, and convert presentations, visit our tools page.