3 Replies Latest reply: Jul 21, 2012 10:04 AM by adninjastrator RSS

    Embedded video shakes


      I was also wondering if you could help me with this:


      I have a video embedded on the homepage but anytime I use the scroll bar the video shakes and looks something like this:  b.png


      I'm using this code:  

      <div class="video"><iframe width="560" height="315" src="http://www.youtube.com/embed/3OU8D8kBjWg" frameborder="0" allowfullscreen></iframe></div>


      and here are the properties for my div tag:



      Sorry, for some reason I'm unable to paste again in the same post.  So I will include everything in the post below it, just in case you need it.

        • 1. Re: Embedded video shakes
          Ivy54 Community Member

          Here is the rest of it:


          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">


          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>Inland Empire Waterkeeper</title>

          <link href="_css/styles.css" rel="stylesheet" type="text/css" />

          <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

          <style type="text/css">

          body,td,th {

              color: #999999;

              font-family: Verdana, Geneva, sans-serif;


          body {

              background-color: #FFFFFF;

              color: #D6D6D6;

              background-image: url(_images/background_teal.png);

              background-repeat: repeat-x;

              margin: auto






          <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

          <div class="container">

            <div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>

            <div class="menubar">

              <ul id="MenuBar1" class="MenuBarHorizontal">

                <li><a href="#" class="MenuBarItemSubmenu">About Us</a>


                    <li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>


                        <li><a href="mission.html">Our Mission</a></li>

                        <li><a href="history.html">Our History</a></li>

                        <li><a href="community.html">Our Community</a></li>



                    <li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>


                        <li><a href="staff.html">Staff</a></li>

                        <li><a href="supporters.html">Supporters</a></li>

                        <li><a href="advisoryboard.html">Advisory Board</a></li>



                    <li><a href="coastkeeper.html">Coastkeeper</a></li>



                <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>


                    <li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>


                        <li><a href="advocacy.html">Advocacy</a></li>

                        <li><a href="education.html">Education</a></li>

                        <li><a href="research.html">Research</a></li>

                        <li><a href="restoration.html">Restoration</a></li>

                        <li><a href="enforcement.html">Enforcement</a></li>



                    <li><a href="projects.html">Projects</a></li>

                    <li><a href="datareports.html">Data &amp; Reports</a></li>



                <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>


                    <li><a href="volunteer.html">Volunteer</a></li>

                    <li><a href="employment.html">Employment</a></li>

                    <li><a href="events.html">Events &amp; Meetings</a></li>

                    <li><a href="donate.html">Donate</a></li>



                <li><a href="#" class="MenuBarItemSubmenu">News Room</a>


                    <li><a href="pressrelease.html">In the News and Press Releases</a></li>

                    <li><a href="legislation.html">Legislative Updates</a></li>

                    <li><a href="waternews.html">Water in the News</a></li>



                <li><a href="#" class="MenuBarItemSubmenu">Resources</a>


                    <li><a href="#" class="MenuBarItemSubmenu">Information</a>


                        <li><a href="watershed.html">Our Watershed</a></li>

                        <li><a href="reportpollution.html">Report Pollution</a></li>



                    <li><a href="photos.html">Photo Gallery</a></li>



                <li><a href="contact.html">Contact Us</a></li>



            <div class="missionstatement"><img src="_images/missionstatement.jpg" width="933" height="110" alt="Inland Empire Waterkeeper" /></div>






          <div class="space1"></div>

          <div class="facebook">

                <div class="facebooktop">

                  <img src="_images/facebooktop.jpg" width="110" height="125" alt="Inland Empire Waterkeeper" />


                <div class="facebookbottom"></div>


              <div class="space2"></div>


             <div class="video"><iframe width="560" height="315" src="http://www.youtube.com/embed/3OU8D8kBjWg" frameborder="0" allowfullscreen></iframe></div>




              <div class="space3"></div>


              <div class="photospace1"></div>

              <div class="photo1"><img src="_images/kayaking_6.jpg" width="176" height="95" /></div>

              <div class="photospace2"></div>

              <div class="photo2"><img src="_images/riverkat_57.jpg" width="176" height="95" alt="Inland Empire Waterkeeper" /></div>

              <div class="photospace3"></div>

              <div class="photo3"><img src="_images/riverkat_172.jpg" width="176" height="95" alt="Inland Empire Waterkeeper" /></div>

              <div class="photospace4"></div>


              <div class="space4"></div>




            <div class="pillars"><img src="_images/pillars_blue.jpg" width="933" height="400" alt="Inland Empire Waterkeeper" /></div>




            <div class="footer"><img src="_images/footer.jpg" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>



          <script type="text/javascript">

          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});






          Thank you!

          • 2. Re: Embedded video shakes
            Nancy O. MVP

            This probably has less to do with your code and more to do with your graphics card.  Although it's anybody's guess because you haven't posted the URL to your page. 


            Even if you don't have a commercial web host yet, there are free ones you can use for testing and debugging purposes.





            Nancy O.

            • 3. Re: Embedded video shakes
              adninjastrator Community Member

              Yeah, this has nothing to do with the embed code, it has to do with the fact that you (your browser) is attempting to paint a moving target (the video) as you scroll the page.

              It may be that your video card can't catch up with the moving target or that the video bitrate is higher than your Internet download speed... so in effect, the video screen moves while scrolling the page but the new data isn't downloading fast enough to fill in the blank space created by the scrolling.

              Or it could be a combination of both.

              Let the video download completely before scrolling and see if that works better. If it does, then the download speed/video bitrate is an issue.

              Test on multiple machines (with different graphics card) and various Internet connection speeds to further diagnose.

              Best wishes,