Embeds not responsive
-
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.