Skip to main content

Embedding HTML

Updated Apr 09, 2025 ·

Using Google Drive (NOT WORKING)​

info

I've tried a lot of workarounds to use static files uploaded in Google Drive but none of it worked.

Google Drive does not allow embedding files in an iframe in your .mdx file, even if the file is publicly shared. The Google Drive viewer page blocks embedding for security reasons.

import React from "react";

<iframe
  src="https://drive.google.com/file/d/194ILry_ILrOUqMjDxNGE-uqaeA1IBCAA/view"
  width="100%" 
  height="600px" 
  style={{ border: "1px solid #ccc" }}
></iframe>
info

I've tried a lot of workarounds to use static files uploaded in Google Drive but none of it worked.

Instead of the viewer link, you can use the direct download link format:

https://drive.google.com/uc?export=download&id=FILE_ID

Example:

import React from "react";

<iframe
  src="https://drive.google.com/uc?export=download&id=194ILry_ILrOUqMjDxNGE-uqaeA1IBCAA"
  width="100%" 
  height="600px" 
  style={{ border: "1px solid #ccc" }}
></iframe>

Using Netlify Drop​

Since Google Drive doesn’t allow embedding HTML files, you can use a service that hosts static files and provides direct public URLs. An example is Netlify Drop.

  • No need to link a Github/online Git repository
  • Drag and drop your HTML files
  • Get a public URL to use in your iframe

To host a static site in Netlify, please see Hosting Static Sites.

Once you have the URL for the site, you can now add it to src in your markdown (.mdx) page:

import React from "react";

<iframe
  src="https://https://melodic-pika-35d471.netlify.app//"
  width="100%"
  height="600px"
  style={{ border: "1px solid #ccc" }}
></iframe>

The website is now embedded in the markdown page, as seen in the example below. You can hover and test the site functionalities.