We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Theme Mercury: cannot extend height of iframe

  • #5861
    Avatar photo[anonymous]


    I’m trying to add a contact form to my new website, which uses the theme Mercury (most recent version).

    The submit button is not displayed on certain screens, because the iframe is not tall enough (i removed some fields to make it less tall, which worked fine on laptop, but not on mobile device).

    I can’t seem to force the iframe to have a minimum height, eg. 1000 pixels, by adding height=”1000px” to the iframe-tag. Something seems to be overriding this setting, but I can’t figure out what it is.

    Can someone help me please?


    Avatar photo[anonymous]

    Have similar issues with iframes. Using Mercury theme too. In mobile versions bottom of iframe is being cut. Also, I can’t remove space after an iframe, which is really annoying. It seems like iframes are working ok for known code, like youtube, anything else acting strange

    Avatar photoBob

    Try to add the following class to the iframe: .post__iframe–1by1;   it should help, if not, let me know.

    <iframe class="post__iframe post__iframe--1by1" ....
    Avatar photo[anonymous]

    Hi Bob,

    Thank you so much for your reply. Unfortunately, the solution does not have any effect. My code looks like this:

    (I’ll add the code as a picture)


    Avatar photoBob

    Please provide with me the URL to this issue.

    Avatar photo[anonymous]
    This reply has been marked as private.
    Avatar photoBob

    Publii automaticly adds a container with a post__iframe class around the iframe, this iframe is styled by CSS rules to be responsive (keeping the aspect ratio), it works in most cases,  such as Youtube, Vimeo movies.
    I think we need to rebuild it and add aspect management for iframes in the editor interface.
    Right now,  I see only the following solution:

    Add via CSS tool:

    .post__iframe::before {
       padding-top: 0;
    .post__iframe > iframe {
       position: relative;

    Please note that these changes are global and may affect your videos.

    Avatar photo[anonymous]

    Dear Bob,

    Thanks for your kind help!

    You’re right: the contact form is now fixed, but now my embedded youtube video is very small. I already changed the iframe as follows, but there seems to be no effect:

    <p><iframe width=”560″ height=”1000″ class=”post__iframe post__iframe–1by1″ src=”; title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen=”allowfullscreen”></iframe></p>

    How can I solve this?