Style Options

Hi wearegiants,
thank you for your question, I’ll try to explain each point:

1. You can add the units, so you can choose whatever you want. If you want your iframe to be 100% page height you can enter 100vh (100% of the viewport height).

2. !important is a CSS rule to override all previous declarations, it can be useful if the theme you are using have declared width or height to iframes and you don’t want to use it.
You can read more about !important here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

3. The “Allow fullscreen” option does exactly that, allow the frame to be displayed full screen, but the responsible for that is the content of the iframe.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen

Here is how Youtube player acts with and without the fullscreen attribute:

View post on imgur.com

Please let me know if I can help you with something else.

Thanks for the reply.

Maybe my iframe isn’t working correctly, I have 100vh set as the height, but i’m still getting a scroll bar on the page: https://connect.beverlyhills.org/walkaudit/

Any suggestions to get this to match the viewport height?

Hi,
in this case you can set the height of the iframe to the calculated height you already have, and set the height value to calc(100vh - 186px).

Please also note that:
* You have a paragraph at the bottom of the content.
* It might not work depending on different screen resolutions.

Thanks!

Thanks for that, not perfect. but it’s pretty close.

It might be aa good idea to list the various units of measurement you can use with the plugin.

Thanks again

Thank you for your feedback!

The units are open to any CSS length unit, so it would be possible to put a link to https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Lengths for example.

Good luck with your project!