Responsive HTML5 embed

Hi
I am trying to embed a HTML5 animation responsively. It is 980 x 110px and I am trying to centre it on the page.
I have tried the techniques for embedding video responsively but they aren’t working for me.
The HTML5 content that I am embedding is responsive on its own page but when it’s embedded, I can make the frame respond but not the HTML5 content. Can anyone please help?

Here is my code:

<div id="anim8wrap">
<div id="anim8"><iframe src="/myfile.html" allowfullscreen></iframe> </div>
</div>

and

#anim8wrap {
    background-image: url(images/mypic.png);
    background-repeat: repeat-x;
    position: relative;
}
#anim8 {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 11.12%;
}

#anim8 iframe {display: block;
 position: absolute;
  top:0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}

Thanks in advance

Hi there Qwerstd,

a link to your “myfile.html” page or at least it’s source code
would enable members to possibly assess your problem(s). :smiley:

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.