Home>Support>Iframe height not 100%

Iframe height not 100%

By Ace, 5 years ago. Last reply by Alex S, 5 years ago.

Hello,

I’m currently using the vantage theme and trying to make an Iframe 100% height. Is there anyway to accomplish this in the way it works for the width? Thanks in advance.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Ace,

    Do you have a public URL where we can take a look at your setup? This will (hopefully) allow me to provide instructions on doing this based on your specific setup (how you’re adding the iframe, the CSS you’re applying, etc).

  2. 5 years, 8 months ago Ace

    Sorry it’s not public, but I can tell you all the details of the Iframe and page. It’s full width with no margins, as you can see from the imgur.

    Example: https://i.imgur.com/cqe7mpn.png

    My problem is that I can’t get the height to adjust like the width does on the page.

    Layout of the row: https://i.imgur.com/WiYDUQi.png
    Layout of the SiteOrgin Editor Widget : https://i.imgur.com/J04jh65.png
    Page Settings : https://i.imgur.com/bAP5Fjy.png
    No custom CSS is applied besides whats in the Iframe.

    If you need anything else let me know. Thanks.

  3. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Ace,

    Can you please provide me with a copy of the iframe HTML used?

  4. 5 years, 8 months ago Ace
  5. 5 years, 8 months ago Ace 
    <iframe class="stream-element" marginheight="0" marginwidth="0" height="100%" width="100%" display="block" border="none" outline="none" margin="none" src="https://player.twitch.tv/?channel=twitch" scrolling="no" seamless="yes" allowfullscreen="yes" frameborder="0"></iframe>

    Didn’t realize it wasn’t showing sorry.

  6. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Ace,

    Thanks. height: 100% doesn’t allow for what you’re specifically after. You’ll need to use CSS. Please replace replace the following attribute to the provided HTML:

    <iframe class="stream-element" marginheight="0" marginwidth="0" height="100%" width="100%" display="block" border="none" outline="none" margin="none" src="https://player.twitch.tv/?channel=twitch" scrolling="no" seamless="yes" allowfullscreen="yes" frameborder="0" style="height: 100vh;"></iframe>
  7. 5 years, 8 months ago Ace

    Thank you Alex, it works just about perfect. Only problem is that it includes the navigation bar height and I can scroll down a bit on the page to see the full video.

  8. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Ace,

    Please reduce height: 100vh; until that no longer occurs.

  9. 5 years, 8 months ago Ace

    Thanks a lot Alex. Hope you have a good New years!

  10. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Ace,

    No problem. You too mate! :)
    Please be sure to post another thread if you have any other questions.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More