ansaurus

Question

The Youtube video in my hidden DIV only starts to load after the DIV is shown

Answer 1

+6 A:

Yep. Use visibility:hidden instead of display:none. display:none means that the element isn't rendered as part of the DOM, so it's not loaded until the display property changes to something else. visibility:hidden loads the element, but does not show it.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
       <script type="text/javascript">
        $(document).ready(function()
        {
          $("#show_video").click(function(){
              $("#hello").css('visibility','visible'); 
          });
        });
        </script>

    </head>

    <body>

    <button id="show_video">Show The Video</button>
    <div id="hello" style="visibility:hidden;">
    <object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;amp;ap=%2526fmt%3D22"&gt;&lt;/object&gt;
    </div>


    </body>
    </html>

zombat 2009-07-21 01:23:22

Answer 2

+1 A:

I think you need to also show the video. Have you ever noticed on embedded videos in webpages that they don't even show the preview static image until they scroll into view?

I think you will be fighting YouTube's algorithms on that one. its probably their goal NOT to load videos until a user clicks on them.

Matthias Wandel 2009-07-21 01:28:22

ansaurus

tags:

views:

answers:

The Youtube video in my hidden DIV only starts to load after the DIV is shown

related questions