how to make responsive twitter embed to mobile device? its available on options ? about gatsby-remark-oembed HOT 4 OPEN

you can try gatsby-remark-responsive-iframe, it worked for me very well, although it generates some problems with my old posts (they have plenty of html code inside md files so there was some conflicts I didn't have the time to check).

an alternative - that's the one I'm using right now - is to insert a global css media query:

@media (max-width: 550px) {
	.twitter-tweet {max-width: 300px !important;}
	iframe { width: 300px; }
}

It is not elegant but it works well...

from gatsby-remark-oembed.

Just sketching an idea, it would awesome if the plugin took a container component in config options that wrapped embeds like Layout wraps pages like this:

<!-- page.md -->

`video: https://www.youtube.com/watch?v=k5veb0wZas0`

// gatsby-config.js

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `@raae/gatsby-remark-oembed`,
            options: {
              container: require.resolve(
                `${__dirname}/src/components/OEmbedContainer/index.js`
              ),
              // usePrefix defaults to false
              // usePrefix: true is the same as ["oembed"]
              usePrefix: ['oembed', 'video'],
...

// components/OEmbedContainer/index.js

// Ideal
const OEmbedContainer = ({ OEmbed }) => ( <div><OEmbed/></div> );

// Because markdown is text
const OEmbedContainer = ({ embed }) => ( <div  dangerouslySetInnerHTML={{ __html: embed }} /> );

Then we can roll our own responsive containers or whatever else.

from gatsby-remark-oembed.

Did this help @qipoy?

from gatsby-remark-oembed.

I like!

This fall I have time to give oembed some much-needed TLC and will look into this.

from gatsby-remark-oembed.