• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

iFrame headaches

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › iFrame headaches

This topic is: not resolved

Tagged: embeds, flash, iframe

  • This topic has 3 replies, 2 voices, and was last updated 10 years ago by Brad West.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 21, 2015 at 8:25 pm #153185
    Cheshire
    Member

    Hi

    Financial Planning Explained
    http://infinitywealth.net.au/financial-planning-explained/

    I would like the vimeo video to be the width of the page.

    iFrame Code:
    <div style="position: relative; height: 600px; width: 970px; display: block; overflow: hidden;">

    <iframe style="margin: -120px 0px 0px -2px; border-width: 0px;" src="http://www.astutewheel.com.au/10600/financial-planning-explained-male" width="977" height="800" scrolling="no">
    </iframe>

    </div>

    How We Can Help You
    http://infinitywealth.net.au/how-we-can-help-you/

    The iFrame is not being responsive

    iFrame Code:
    <div style="position: relative; height: 600px; width: 970px; display: block; overflow: hidden;">

    <iframe style="margin: -120px 0px 0px -2px; border-width: 0px;" src="http://www.astutewheel.com.au/10600/how-we-can-help-you" width="977" height="800" scrolling="no"></iframe>

    </div>

    I've googled and there seems to be CSS cutomisations that you can apply - would this be the solution for Genesis theme - what do you recommend

    tia Jayne

    May 21, 2015 at 8:58 pm #153191
    Brad West
    Member

    I've heard there are some plugins that will do this, but I tend to shy away from plugins when I can.

    Here's how I handle iframe embeds on my sites.

    I add this to my style.css file:

    /* iFrame
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .iframe-embed {
      position:relative;
      margin-bottom:1rem;
      padding-bottom:56.25%;
      overflow:hidden;
      max-width:100%;
      height:auto
    }
    
    .iframe-embed iframe,
    .iframe-embed object,
    .iframe-embed embed {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%
    }

    Then I wrap any <iframe ...></iframe> code with <div class="iframe-embed">...</div>. In your video example above it would look like this:

    <div class="iframe-embed">
    <iframe src="http://player.vimeo.com/video/99488584/"></iframe>
    </div>

    This will allow for full-width videos that will shrink to fit the screen on smaller devices.

    May 24, 2015 at 8:51 am #153466
    Cheshire
    Member

    Thank you very much - apologies I didn't reply earlier I forgot to tick the box for email notifications.

    That has worked really well for the Vimeo, but not the other page:

    http://infinitywealth.net.au/how-we-can-help-you/

    do you know how i can get this one to "shrink" - you mentioned a plugin - yes, groan at using a plugin......

    May 24, 2015 at 9:20 pm #153519
    Brad West
    Member

    That element is built in flash. I don't know enough about flash to understand why it behaves differently than other iframe embeds. I looked around the web for tutorials, but couldn't find anything spastic to your situation.

    I've added some tags to this thread, maybe that will get someone's attention who can help.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble