2 Replies Latest reply on Jun 1, 2015 9:48 AM by WeaselFlix

    Footer Moves when Maximized / Fluid Grid Video Resize

    WeaselFlix Level 1

      I am experiencing some issues with my footer on this page: http://pauldhart.com/tf_teaser.html

       

      I applied code to allow for video embed scalability in Fluid Grid and the footer is in the EXACT right place when the window is reduced in size, however, when maximized the footer jumps down below the scroll.

       

      I assume it has something to do with my code for the video scaling, since it goes away when I cut that CSS but I can't pinpoint the issue.  Below is the code in question.

       

      HTML PORTION: 

      <div id="contentbody">

      <div class="video-container">

      <iframe src="https://player.vimeo.com/video/128816726?color=f6ecca&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

      </div>

      <div id="fb-root"></div>

       

          <script>(function(d, s, id) {

       

            var js, fjs = d.getElementsByTagName(s)[0];

       

            if (d.getElementById(id)) return;

       

            js = d.createElement(s); js.id = id;

       

            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

       

            fjs.parentNode.insertBefore(js, fjs);

       

          }(document, 'script', 'facebook-jssdk'));</script>

       

            <div align="left" id="footer"><div class="fb-like" data-href="http://facebook.com/threefingersmovie" data-width="330" data-colorscheme="light" data-show-faces="false" data-send="true">

            </div>

       

      CSS PORTION:

       

      #contentbody {

          clear: both;

          float: left;

          width: 100%;

          display: block;

          margin: 0px;

          padding: 0px;

          box-shadow: 3px 10px 20px #000;

          max-height: 600px;

      }

       

      .video-container {

          position:relative;

          padding-bottom:56.25%;

          padding-top:30px;

          height:0;

          overflow:hidden;

      }

       

      .video-container iframe, .video-container object, .video-container embed {

          position: absolute;

          top: 0;

          left: 0;

          width: 100%;

          height: 100%;

          max-height: 600px;

      }

       

       

      If you follow the link above and resize the browser you will see the issue.  Any suggestions would be very helpful!  Thanks guys/gals.