> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt). > Use it to discover all available pages before exploring further. # PDF Not Loading Fix a PDF that won't display in Custom iFrame for Elementor and Gutenberg. Covers server headers, Google Drive preview URLs, authentication, and mixed content. ## Overview A PDF that fails to load inside an iFrame is usually caused by one of four things: the server forces the file to download instead of display, the URL points to a viewer page rather than the file itself, the file requires authentication, or there is an HTTP/HTTPS mismatch. This guide covers each cause with a specific fix. --- ## Cause 1: The Server Forces a File Download Some servers send a `Content-Disposition: attachment` HTTP response header when serving a PDF. This tells the browser to download the file instead of rendering it inline. The iFrame displays blank because the browser receives a file download, not a displayable page. **How to identify this:** Open the PDF URL directly in a browser tab. If the browser immediately downloads the file instead of opening it, the server is sending this header. **Fix:** You need a URL that serves the PDF with inline display headers. Options: - Host the PDF on your own WordPress site (Media Library). WordPress serves PDFs inline by default. - Use a Google Drive preview URL (see Cause 2 below). - Use a PDF hosting service that serves files inline, such as PDFhost.io or a CDN configured for inline delivery. --- ## Cause 2: The URL Is a Viewer Page, Not a Direct PDF Link ### Google Drive Google Drive file URLs come in two formats. The wrong format loads the Drive viewer interface, which blocks embedding. | URL format | Result | |---|---| | `drive.google.com/file/d/FILE_ID/view` | Loads Drive viewer — blocks iFrame | | `drive.google.com/file/d/FILE_ID/preview` | Designed for iFrame embedding | **Fix:** Change `/view` to `/preview` in the Google Drive URL. Before: `https://drive.google.com/file/d/ABC123/view?usp=sharing` After: `https://drive.google.com/file/d/ABC123/preview` Also confirm the file sharing is set to **Anyone with the link can view**. A private or restricted file shows a login prompt inside the iFrame. ### Dropbox Dropbox sharing links point to a Dropbox page, not the file itself. Direct download links force a download rather than inline display. **Fix:** Replace `www.dropbox.com` with `dl.dropboxusercontent.com` in the URL and remove any `?dl=1` parameter. This serves the raw PDF directly, which browsers can render inline. --- ## Cause 3: The PDF Requires Authentication If the PDF is stored in a private location (Google Drive private file, password-protected page, paywall, or corporate intranet), the iFrame loads a login prompt or error page instead of the PDF. **Fix:** Make the PDF publicly accessible. There is no way to pass credentials through Custom iFrame to authenticate against a protected document. --- ## Cause 4: Mixed Content (HTTP PDF on an HTTPS Site) If your WordPress site runs on HTTPS and the PDF URL starts with `http://`, the browser blocks the request as mixed content. The iFrame remains blank with no visible error on the page. **Console error:** `Mixed Content: The page at 'https://yoursite.com' was loaded over HTTPS, but requested an insecure frame 'http://...'` **Fix:** Use an `https://` URL for the PDF. If the hosting server does not support HTTPS, the PDF cannot be embedded on an HTTPS WordPress site. --- ## Cause 5: Height Is Too Small to Display the PDF A PDF loaded successfully but appearing as a thin blank strip is a height issue. The iFrame is too short to show any PDF content. **Fix:** Set the height to at least **600px**. For full-page documents, 800–900px works better. See the [iFrame Height Fix guide](/troubleshooting/iframe-height-fix) for a full reference table. --- ## Cause 6: 3D Flipbook View Is Not Displaying The 3D Flipbook View is a Pro feature that renders PDFs in a page-turning interface. If the flipbook is blank or shows incorrectly: - Set height to at least **500px**. For A4 documents, 600–800px is recommended. - Turn **Auto Height off**. Auto Height conflicts with the flipbook layout and must be disabled. - Confirm the source is a direct PDF URL or uploaded PDF file. The flipbook cannot render a Google Drive viewer URL. --- ## FAQ Two common reasons: the server sends `Content-Disposition: attachment` (forces download rather than inline display in an iframe), or the PDF host sets X-Frame-Options headers that block embedding. Open browser DevTools and check the Console and Network tabs for errors when the iFrame is blank. Change the URL from `/view` to `/preview` — for example, `https://drive.google.com/file/d/FILE_ID/preview`. Also set the file sharing to Anyone with the link can view. Private files show a login prompt inside the iFrame. Enable the **Scroll Bar** option in Custom iFrame settings. In Elementor: Content tab, Show Scrollbar, Yes. In Gutenberg: block settings panel, Scroll Bar, on. This adds a scrollable area inside the iFrame so visitors can scroll through the document. No. Custom iFrame loads the PDF URL in an iFrame. If the URL requires a password or login, the iFrame displays the authentication prompt rather than the document. The PDF must be publicly accessible to embed it. The PDF source type in Custom iFrame is specifically designed for embedding PDF files. It configures the iFrame with settings optimized for PDF display. The URL source type works for any URL — including PDFs — but without those optimizations. For best results with PDF files, use the PDF source type. --- ## Related Guides - [iFrame Not Showing](/troubleshooting/iframe-not-showing) - [iFrame Height Fix](/troubleshooting/iframe-height-fix) - [3D Flipbook PDF](/features/3d-flipbook-pdf) - [Embed Blocked or Refused](/troubleshooting/embed-blocked)