Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Official Plugin
View plugin on GitHub

gatsby-remark-responsive-iframe

Wraps iframes or objects (e.g. embedded YouTube videos) within markdown files in a responsive elastic container with a fixed aspect ratio. This ensures that the iframe or object will scale proportionally and to the full width of its container.

Install

npm install gatsby-remark-responsive-iframe

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-responsive-iframe`],
    },
  },
]

Usage in Markdown

This plugin requires both width and height attributes to be set on the iframe or object tag so that the correct aspect ratio can be calculated. Both unitless and pixel values are supported. If any other value is detected (for example a percentage width), the wrapper will not be applied.

Example usage:

This is a beautiful iframe:

<iframe src="http://www.example.com/" width="600" height="400"></iframe>
© 2024 Gatsby, Inc.