iFrame headaches

[Cheshire]

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

[Brad West]

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.

[Cheshire]

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......

[Brad West]

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