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

May 25, 2021 at 8:16 am #5861

[anonymous]

Hi,

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?

Mathias

May 26, 2021 at 8:59 pm #5866

[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

May 28, 2021 at 8:11 am #5876
Bob
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" ....
```
May 28, 2021 at 8:35 am #5878

[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)

Mathias

May 28, 2021 at 8:44 am #5882

Bob

Please provide with me the URL to this issue.

May 28, 2021 at 9:07 am #5883

[anonymous]

This reply has been marked as private.

May 28, 2021 at 10:11 am #5884
Bob
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.
May 28, 2021 at 11:46 am #5885

[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=”https://www.youtube.com/embed/eRQc9seL6Cc” 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?