Embed PowerPoint on a Website

If you need to embed PowerPoint on a website, you’ve got three practical paths: the built‑in PowerPoint for the web embed, a OneDrive/SharePoint link wrapped by Office Viewer, or exporting to HTML5. Each has different trade‑offs for speed, permissions, and how updates flow through.

If you’re deciding between tools, you might also want our step‑by‑step on embedding Google Slides: Embed Google Slides on a website. For a broader look at PowerPoint publishing options, see How to embed a PPT file in a website.

Below you’ll find clear instructions, platform notes for WordPress/Shopify/Wix, and troubleshooting for the usual snags—framing restrictions, sizing, and link permissions.

Overview

You can embed a PowerPoint in HTML in three main ways:

• PowerPoint for the web (Share ➝ Embed) Copy a prebuilt iFrame from PowerPoint online. Updates to the deck propagate automatically.
• OneDrive/SharePoint link + Office Viewer Point an iFrame to view.officeapps.live.com/op/embed.aspx?src=… using the publicly shareable PowerPoint URL. Also updates live.
• Convert to HTML5 Export to a standalone HTML5 viewer and embed that. Fast and reliable for public sites, but you’ll re‑publish to update.

Key considerations:

• Permissions: Public websites typically require Anyone with the link can view for the source file. Organizational SharePoint policies can block framing externally.
• Updates: Embeds tied to OneDrive/SharePoint update immediately; HTML5 exports don’t.
• Responsive layout: Use a simple CSS wrapper so the iFrame scales on mobile.

Quick comparison:

Authoritative references:

• Microsoft: Embed a presentation on a web page
• OneDrive sharing: Share files and folders
• MDN: encodeURIComponent for URL encoding

Insert a PowerPoint embed instantly with MicroEdits

Editing a live site just to add an iFrame shouldn’t require a developer, a staging environment, or a late‑night deploy. With MicroEdits, you tell it what you want—embed this PowerPoint above the hero and make it responsive—and it does the rest on your existing website.

• Plain English changes: No coding or CMS spelunking.
• Instant preview: See the result on your site, share the preview, and roll it back anytime.
• Works anywhere: WordPress, Shopify, Wix—MicroEdits applies the change directly so you don’t copy‑paste code.
• Real‑world flexibility: Drop in OneDrive/Office embeds, HTML5 viewers, or third‑party widgets like Calendly or Google Maps—fast.

It feels like magic because it removes the fiddly parts: finding the right template, wrestling with the editor, and avoiding collateral breakage.

Method 1: PowerPoint for the web (Embed)

The simplest route when your deck already lives in Microsoft 365.

1. Open your deck in PowerPoint for the web.
2. Choose Share ➝ Embed (or File ➝ Share ➝ Embed).
3. Pick a size and copy the iFrame.
4. Ensure the file’s link settings allow viewing (often Anyone with the link).
5. Paste the iFrame into your site.

Example (yours will have a different URL):

<!-- PowerPoint for the web embed -->
<div class="ppt-embed">
  <iframe
    src="https://onedrive.live.com/embed?resid=YOUR_RES_ID&authkey=YOUR_AUTH_KEY"
    width="960"
    height="569"
    frameborder="0"
    allowfullscreen
    title="Presentation"
  ></iframe>
</div>

Make it responsive with the CSS in the platform section below.

Tips:

• Starting slide: Some embeds honor a wdStartOn=5 parameter to open on slide 5. Test on your tenant.
• UI chrome: The Office viewer UI varies by account and policy. Expect minimal control over hiding toolbars.

Method 2: OneDrive/SharePoint link + Office Viewer

If you have a direct share link to the .pptx file, wrap it with Office Viewer:

1. Get a view link to the PowerPoint file from OneDrive or SharePoint. Set it to Anyone with the link can view for public websites.
2. URL‑encode the full file URL (use your editor or an encoder; see MDN’s encodeURIComponent).
3. Build the iFrame with this pattern: https://view.officeapps.live.com/op/embed.aspx?src=ENCODED_URL
4. Paste into your page.

Example:

<!-- Office Viewer embed with encoded source URL -->
<div class="ppt-embed">
  <iframe
    src="https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fcontoso.sharepoint.com%2Fsites%2Fassets%2FShared%20Documents%2Fdeck.pptx"
    width="960"
    height="569"
    frameborder="0"
    title="Presentation"
  ></iframe>
</div>

Notes:

• If your organization enforces strict framing rules, you might see a refused to display or similar error. See Troubleshooting.
• You can often add parameters like wdStartOn=1 to start on a specific slide, but support can vary.

Method 3: Convert to HTML5

When you want faster loads, fewer permission puzzles, and full control over layout, export the presentation to an HTML5 viewer and host the output (e.g., at /assets/presentations/your-deck/). Then embed that page:

<!-- HTML5 viewer embedded -->
<div class="ppt-embed">
  <iframe
    src="/assets/presentations/your-deck/index.html"
    width="960"
    height="540"
    frameborder="0"
    title="Presentation"
  ></iframe>
</div>

• Performance: Typically faster and more predictable on public sites.
• Updates: Re‑export/re‑upload to change the deck.
• Branding control: No Microsoft UI chrome inside the frame.

Platform notes: WordPress, Shopify, Wix

Use a clean wrapper so your PowerPoint web embed scales on any screen.

HTML structure:

<div class="ppt-embed">
  <iframe src="YOUR_EMBED_URL" title="Presentation" frameborder="0"></iframe>
</div>

Responsive CSS:

.ppt-embed {
  position: relative;
  aspect-ratio: 16 / 9; /* modern, preferred */
  max-width: 100%;
}
.ppt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback if aspect-ratio isn't supported */
.ppt-embed {
  height: 0;
  padding-top: 56.25%; /* 16:9 */
}
.ppt-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Platform specifics:

• WordPress In the block editor, add a Custom HTML block and paste the iFrame. Add the CSS to your theme’s Additional CSS. See WordPress docs:

  Custom HTML block

  . This is the most reliable route for wordpress powerpoint embed.
• Shopify Use a Custom Liquid section in the theme editor and paste the iFrame HTML inside it. Shopify guide:

  Custom Liquid section

  . Add the CSS to your theme’s CSS file.
• Wix Add an Embed element (HTML/iFrame), paste the iFrame, and adjust sizing. Wix reference:

  Embedding a widget

  .

Privacy and permissions

• Public sites: Set the PowerPoint file to Anyone with the link can view. Otherwise visitors hit a sign‑in wall.
• Organizational SharePoint: Some tenants block framing on external sites, resulting in refused to display. Your admin controls these policies; if you can’t change them, the HTML5 method avoids the restriction.
• Limit downloading: You can toggle block download on the share link in some setups, but the viewer controls are ultimately Microsoft’s.
• Data footprint: Embeds load content from Microsoft domains. If your site enforces a Content Security Policy, add the relevant hosts to frame-src.

For background on external sharing, see Microsoft’s overview: SharePoint external sharing.

Troubleshooting

• Refused to display/connect Likely framing is blocked by tenant policy (frame-ancestors / X‑Frame‑Options). Try the PowerPoint web embed first. If it still fails, publish the deck to a public OneDrive (consumer) or switch to HTML5.
• Blank or broken preview Verify the source URL works in a private browser window. Ensure Anyone with the link can view and that the file wasn’t moved.
• Mixed content Your site is HTTPS but the embed is HTTP. Use HTTPS URLs for OneDrive/SharePoint and any HTML5 host.
• Non‑responsive sizing Wrap the iFrame with the .ppt-embed CSS above. Avoid fixed pixel widths in narrow columns.
• Slow loading Large decks are heavy. Trim images, consider HTML5, or load the embed below the fold.
• Content Security Policy blocked If you use CSP, add https://onedrive.live.com, https://view.officeapps.live.com, and your *.sharepoint.com domain to frame-src.

FAQ

Can I autoplay a PowerPoint inside the embed?

Autoplay is limited in Microsoft’s viewer to respect browser policies. There’s no reliable autoplay switch for the standard PowerPoint web embed. If you need a hands‑off display, export the deck to video (MP4) or use the HTML5 method, which can simulate autoplay within its own viewer.

How do I start on a specific slide?

Some embeds honor a wdStartOn=5 query parameter to open on slide 5. Append it to the iFrame’s src and test. Support varies by viewer and tenant policy, so treat this as a convenience, not a guarantee.

Will edits to my deck update on the site automatically?

Yes—if you used the PowerPoint web embed or the Office Viewer method with a OneDrive/SharePoint link, updates flow through. If you converted to HTML5, you’ll re‑export and replace the hosted files to publish changes.

Can I get analytics on slide views?

The Microsoft viewer doesn’t expose per‑slide analytics on your website. Track engagement at the page level with your analytics tool (e.g., a scroll‑depth event when the embed enters the viewport). Tools like Hotjar can show whether visitors reach the section, even though they can’t inspect interactions inside the iFrame.

What’s the best aspect ratio for mobile?

Stick to 16:9 and a responsive wrapper. The CSS in this guide sets an aspect ratio of 16:9 and scales the iFrame fluidly, producing a clean embed powerpoint in html that works across devices.

Does this work on WordPress and Shopify?

Yes. In WordPress, use a Custom HTML block; in Shopify, paste the embed into a Custom Liquid section. Add the responsive CSS to your theme. See the platform notes above for links to official docs.

What if my company’s SharePoint won’t allow embedding?

That’s an organizational security choice. You can ask your admin to review framing policies, publish via a more permissive OneDrive, or use the HTML5 method, which doesn’t depend on Microsoft’s frame rules.

If you want to get this done without touching templates, MicroEdits can drop the iFrame exactly where you want it, make it responsive, and push it live in minutes—no coding, no juggling CMS quirks.