3 Replies Latest reply on Mar 5, 2014 5:41 PM by keithleyson

    How do embed Edge Animate via iFrame, Embed, etc and make it responsive?

    keithleyson Level 1

      Hi,

       

      Current at wits end. I wanted to embed an Edge animation into my responsive (Bootstrap 3) project. I managed to make it responsive but there is problem, the containing div's height does not resize according to the new height of the iframe.

       

      Screen Shot 2014-02-13 at 8.37.13 pm.png

      desktop view

       

      Screen Shot 2014-02-13 at 8.37.31 pm.png

      the mobile view - the yellow orange color represents the holder-div's background so that I can see that it is not resize to the size of the animation.

       

      The desired effect would be below

      Screen Shot 2014-02-13 at 8.37.39 pm.png

       

      .myiframe {
           position: relative;
           padding-bottom: 65.25%;
           padding-top: 30px;
           height: 0;
           overflow: auto;
      }
      .myiframe iframe {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
      }

       

      Screen Shot 2014-02-13 at 8.58.27 pm.png

       

      The code above is what I used and it is cotained in two more DIVs. From my testing myiframe and iframe resizes as expected however the main wrapper divs hero and hero_slider do not follow the height of the iframe after resizing.

       

      I hope someone can help me with this problem. Thank you.