IFrame Height Issue

Support
#1

Hi, I have started a thread about this already with no response.

IFrame videos are not reaching a minimum height. They appear to be squished and not even adding the 52 something padding doesn’t solve the problem.

celebrationbeachchurch.com/home-test

#2

Hi @denrob14,

Thanks for reaching out.

Please remove the height 100% you set in your iframe so that it will have a proper height. Once you are done removing the height 100%, the height will be set to 400px and it will not squish the output anymore.

image
image1294×356 84.9 KB

Hope that helps.

Thank you.

#3

Hi, that did not resolve the issue. I’ve included login creds in secure note.

Thank You,
Dennis

#4

Hello @denrob14,

Thanks for sharing the credentials. I went ahead and checked your page content. It seems that you added an inline style for height. Please add custom height there or you can add the custom CSS under Pro—>Theme Option —>CSS.

.x-raw-content.ls-container.ls-container-1 iframe {
    height: 400px !important;
}

Please feel free to change the value of height as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

#5

That did not work.

#6

Just to fill you all in. I have tried both of your solutions with no avail. I have a test page setup as /home-2021 with just the 2 players in a Javascript timed content module in a raw content element . On Sunday mornings, the player switches to a livestream, and then at noon it switches back to a playlist.

I can’t get any video to respond to height in anything other than Google Chrome. It displays fine in Chrome, but not any others.

Thank you all.

#7

Hello @denrob14,

If you are logged in, it will display correctly like this:
See the secure note.

And if you are logged out, you will be seeing this:
see the secure note.

And also I found out that you are using Cloudflare. Right after your updates, please log in to your Cloudflare account and purge your site cache. You also need to regenerate the minified CSS and JS files in Cloudflare.

Hope this helps. Kindly let us know how it goes.

#8

So what does that mean regarding the logged in vs logged out?

Another issue i’ve had with this site is I can’t get the child theme to pick up styles.css anymore for some reason. I’ve had to dump all my CSS in the theme options.

But what causes that logged in vs logged out?

Thank you for all of the info, I will get busy on that now.

#9

Also,

In chrome, the iframe with a height and width set to 100% inline style within a div with a max width of 1000px and width of 95% (mobile padding) works while logged out as well. See bottom of celebrationbeachchurch.com/home-2021

Open Firefox however and navigate to the same page and it’s height is not filling the Div. The Div is still there with the padding causing the height, but the Iframe isn’t filling it out for some reason.

#10

Hello @denrob14,

<iframe src="https://vimeo.com/event/66279/embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen style="position:absolute;top:0;left:0;width:100%;"></iframe>

You have inserted the embedded video code inside a shortcode [timed-content-rule id="4025"]. Please be advised what when using embedded video code, it is best that you use the Video element. We would highly recommend that you go to Pro > Global Blocks. Create separate global blocks and then insert a video element in them. Take note of the global block shortcode and then insert it along with the other shortcode in a content area element. For example:

<div class="home-player">
	[timed-content-rule id="4025"][cs_gb id=123][/timed-content-rule]

	[timed-content-rule id="4134"][cs_gb id=456][/timed-content-rule]

</div>

Kindly let us know how it goes.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.