Javascript 我隐藏的DIV中的Youtube视频仅在显示DIV后才开始加载_Javascript_Jquery_Youtube_Visibility

Javascript 我隐藏的DIV中的Youtube视频仅在显示DIV后才开始加载

javascript jquery youtube

Javascript 我隐藏的DIV中的Youtube视频仅在显示DIV后才开始加载,javascript,jquery,youtube,visibility,Javascript,Jquery,Youtube,Visibility,我有一个Youtube剪辑在我的页面上的一个隐藏的DIV中加载页面后，我希望在后台安静地加载视频，这样当用户单击按钮“取消隐藏”DIV时，视频就可以开始了但按照我现在的方式，视频只有在用户点击按钮后才开始加载我是否可以在这里进行更改，将视频加载到背景中，然后根据按钮单击隐藏或显示它 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

我有一个Youtube剪辑在我的页面上的一个隐藏的DIV中

加载页面后，我希望在后台安静地加载视频，这样当用户单击按钮“取消隐藏”DIV时，视频就可以开始了

但按照我现在的方式，视频只有在用户点击按钮后才开始加载

我是否可以在这里进行更改，将视频加载到背景中，然后根据按钮单击隐藏或显示它

<!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").show();  
      });
    });
    </script>

</head>

<body>

<button id="show_video">Show The Video</button>
<div id="hello" style="display:none;">
<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>


无标题文件
$（文档）.ready（函数（）
{
$（“#显示视频”）。单击（函数（）{
$（“#你好”）.show（）；
});
});
播放视频

是的。使用

visibility:hidden

而不是

display:none

display:none

表示元素不作为DOM的一部分呈现，因此在display属性更改为其他属性之前不会加载元素<代码>可见性：隐藏加载元素，但不显示它

试试这个：

<!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>


无标题文件
$（文档）.ready（函数（）
{
$（“#显示视频”）。单击（函数（）{
$（“#你好”）.css（'visibility'，'visibility'）；
});
});
播放视频

我认为您还需要播放视频。你有没有注意到网页中的嵌入式视频在滚动到视图中之前甚至不会显示预览静态图像

我想你会在这个问题上与YouTube的算法抗争。他们的目标可能是在用户单击视频之前不加载视频。

您可以在Jquery中简单地使用show（）和hide（）

<!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>


无标题文件
$（文档）.ready（函数（）
{
$（“#你好”）.hide（）；
$（“#显示视频”）。单击（函数（）{
$（“#你好”）.show（）；
});
});
播放视频