Style Options

  • Resolved wearegiants

    (@wearegiants)


    6 years ago

    Hi, couple of questions for you.

    1. What are the units of measurement the plug-in uses? is there a way to have the iframe fill 100% of the page height which adjusts based on the device?

    2. Additionally, what is the !important tag meant to be used for with this plugin?

    3. Toggling between “Allow fullscreen: doesn’t seem to make a change– am i missing something?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author unapersona

    (@unapersona)

    6 years ago

    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.

    Thread Starter wearegiants

    (@wearegiants)

    6 years ago

    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?

    Plugin Author unapersona

    (@unapersona)

    6 years ago

    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!

    Thread Starter wearegiants

    (@wearegiants)

    6 years ago

    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

    Plugin Author unapersona

    (@unapersona)

    6 years ago

    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!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Style Options’ is closed to new replies.