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

后端未结

关注

 3  1099

自闭症患者

I have a Youtube clip in a hidden DIV on my page.

After the page has loaded I wanted the video to load quietly in the background so that when the user clicks the but

相关标签:

3条回答

太阳男子

2021-01-06 04:12

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

耶瑟儿～

2021-01-06 04:25

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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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"></script>
       <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;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;ap=%2526fmt%3D22"></object>
    </div>


    </body>
    </html>

0 讨论(0)

时光取名叫无心

2021-01-06 04:27

you can simple use show() and hide() at Jquery.

<!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">
<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"></script>
   <script type="text/javascript">
    $(document).ready(function()
    {
        $("#hello").hide(); 
      $("#show_video").click(function(){
          $("#hello").show();  
      });
    });
    </script>

</head>

<body>

<button id="show_video">Show The Video</button>
<div id="hello" >
<object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&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;ap=%2526fmt%3D22"></object>
</div>


</body>
</html>

0 讨论(0)