gatesby code example

Example 1: gatesby

<div style="width:100%;height:0;padding-bottom:63%;position:relative;">
  <iframe
    src="https://giphy.com/embed/XatG8bioEwwVO"
    width="100%"
    height="100%"
    style="position:absolute"
    frameborder="0"
    class="giphy-embed"
    allowfullscreen
  ></iframe>
</div>

Example 2: gatesby

<iframe
  src="https://codesandbox.io/embed/ynn88nx9x?view=split"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

Example 3: gatesby

<iframe
  src="https://codepen.io/team/codepen/embed/preview/PNaGbb"
  style="width:100%; height:300px;"
></iframe>

Example 4: gatesby

// In your gatsby-config.js

module.exports = {
  // Find the 'plugins' array
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-embedder`,
            options: {
              customTransformers: [
                // Your custom transformers
              ],
              services: {
                // The service-specific options by the name of the service
              },
            },
          },

          // Other plugins here...
        ],
      },
    },
  ],
};

Example 5: gatesby

// In your gatsby-config.js

module.exports = {
  // Find the 'plugins' array
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-embedder`,
            options: {
              customTransformers: [
                // Your custom transformers
              ],
              services: {
                // The service-specific options by the name of the service
              },
            },
          },

          // Other plugins here...
        ],
      },
    },
  ],
};

Example 6: gatesby

yarn add gatsby-remark-embedder