4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

iFrame Not Mobile Friendly - How Can I Fix?

by zoro
3 replies
I recently installed some iFrame script into one of the pages of my Wordpress site. Unfortunately the contents within the iFrame is not scaling compatible with Mobile Phone screens.
Is there a way I can make the iFrame script work on mobiles?
#fix #friendly #iframe #mobile
  • Profile picture of the author Marcus W K Wong
    Wrap the iframe in a responsive wrapper and set the iframe to width:100%, and the wrapper is your max-width.

    There's a few snippets already online on how to do it (I'm assuming your embedding a YouTube video at the moment).

    Here's effectively what I use:

    Working version here:
    Edit fiddle - JSFiddle


    CSS:

    .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
    .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }


    HTML

    <~div class="videoWrapper">
    <~iframe src="//www.youtube.com/embed/9fSde2DD8YQ"><~/iframe>
    <~/div>

    *** remove the '~' in the div and iframe tags above
    {{ DiscussionBoard.errors[11111905].message }}
    • Profile picture of the author zoro
      Thanks Mate!

      I am actually trying to embed a whole html page into a Wordpress page using an iFrame. If I just change the width to 100% will it be mobile friendly?

      Originally Posted by Marcus W K Wong View Post

      Wrap the iframe in a responsive wrapper and set the iframe to width:100%, and the wrapper is your max-width.

      There's a few snippets already online on how to do it (I'm assuming your embedding a YouTube video at the moment).

      Here's effectively what I use:

      Working version here:
      Edit fiddle - JSFiddle


      CSS:

      .videoWrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
      }
      .videoWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }


      HTML

      <~div class="videoWrapper">
      <~iframe src="//www.youtube.com/embed/9fSde2DD8YQ"><~/iframe>
      <~/div>

      *** remove the '~' in the div and iframe tags above
      {{ DiscussionBoard.errors[11113488].message }}
  • Profile picture of the author PsiCat
    Markus, Your code is VERY close to what I need (THANKS!), but I just can't get it the rest of the way.

    I am trying to make a responsive youtube container that is centered on the screen with 10% white space on either side.

    I did this with the iframe in the Edit fiddle - JSFiddle link you provided, and it looks very close to what I want, but then it pushes the content below the video down too far. It's like the responsive container is still the full size of the video but I'm only displaying in 80% of it and the rest is autofilled with invisible placeholder space which pushes my button below the fold.
    .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 80%;
    }

    Can you tell me how I can display a responsive youtube video sandwiched vertically between two images (like a website header on top and a button below) without a bunch of white space/padding between the images and the video?
    {{ DiscussionBoard.errors[11143531].message }}

Trending Topics