• When embedding using this editor, it creates an iframe inside a DIV and sets the following style for the iframe:

    style="width:100%; height:320px;"

    This is the same regardless of embedding YouTube, Vimeo, Facebook posts, etc., so I assume this is editor-generated code.

    This creates a problem for responsive embeds due to the fixed value. And because the embedded iframe is from another domain, the height/width cannot be overridden via CSS.

    It looks like height and width are set as part of the embed parser as detailed in https://github.com/editor-js/embed.

    {
      regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
      embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
      html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
      height: 300,
      width: 600,
      id: (groups) => groups.join('/embed/')
    }

    How can we make embeds more responsive if these values are hardcoded by the editor?

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Embeds not responsive’ is closed to new replies.