11 Replies Latest reply on Jun 19, 2015 5:59 PM by jackley923

    2 Edge animations in Iframes on the same page?

    helloworm

      Hi

       

       

      I am sure this question has been asked before but searching the web and this forum I am still not sure of the answer. Its day 2 now  . . lol

       

      I have the code to imbed the animations here . .

       

      1) 

       

      <div class="9promopanels">

      <div class="embed-container">

      <iframe src="http://myURLhere.co.uk/wp-content/dynamiccontent/promo%20box%202/9%20promo%20box.html" frameborder="0"></iframe>

      </div>

      </div>

       

      And the (responsive)CSS:

       

      .9promopanels {

      width: 100%;

      margin: 0px auto;

      }

       

       

      .embed-container {

      height: auto;

      width: 100%;

      padding-bottom: 100%;

      overflow: hidden;

      position: relative;

      }  

          

      .embed-container iframe {

      width: 100%;

      height: 100%;

      position: absolute;

      top: 0;

      left: 0;

      }

       

      Then for the next one I have again the same code, just different settings on the padding-bottom: 30% to set the height relative to the aspect ratio (as a percentage).

       

       

       

      Now then. Heres the tricky part! I need to get the two animations to run on the same page in the main content, just one further down the page. As it stands now there is a conflict on page, but I am not that great at Js!

       

      I am not the cleverest one out there, but am ok so I would appreciate a fairly simple explaination!!

       

       

       

      Thanks for the help!