Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #139108
    Ben Beard
    Participant

    So I am trying to make a block that has 2 core/embed blocks.

    const TEMPLATE = [
    		["core/embed", { placeholder: "Add URL" }],
    		["core/embed", { placeholder: "Add URL" }]
    ];

    So it works/looks fine on the front end. However in the dashboard the iframe does not have the responsive capabilities of a regular embed.

    I compared my block and a regular embed and noticed that these classes have been stripped out.
    “wp-embed-aspect-16-9 wp-has-aspect-ratio wp-block-embed-youtube wp-block-embed is-type-video”

    I also noticed the regular embed resizes its height/width via JS (or so I assume)

    My question is…
    Has anyone made a block similar to this and knows how to deal with the loss of the native responsivness?
    (I have tried everything via css but I think there is more to fix this than css)

    Also let me know if yall need more info. Thanks

    • This topic was modified 4 months, 2 weeks ago by Ben Beard.
    #139119
    Zac Gordon
    Keymaster

    I haven’t tried exactly what you’re doing, but I believe that WordPress applies some CSS (maybe JS too) to the backend to make videos responsive, but they were not originally applying it to the frontend (that may have changed).

    You might try dynamically adding those classes to your embeds with the Data API and see if that resolves the situation.

    #139125
    Ben Beard
    Participant

    Great thanks! I’ll give that a shot

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.