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 button to "un-hide" the DIV, the video will be ready to go.
But the way I have it now, the video starts to load only after the user clicks the button.
Is there a change I could make here to have the video loaded in the background and then just hide or show it based on the button click?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=".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=";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=";amp;ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
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 button to "un-hide" the DIV, the video will be ready to go.
But the way I have it now, the video starts to load only after the user clicks the button.
Is there a change I could make here to have the video loaded in the background and then just hide or show it based on the button click?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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./v/UyyjU8fzEYU&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./v/UyyjU8fzEYU&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
3 Answers
Reset to default 8Yep. 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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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./v/UyyjU8fzEYU&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./v/UyyjU8fzEYU&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>
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.
you can simple use show() and hide() at Jquery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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./v/UyyjU8fzEYU&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./v/UyyjU8fzEYU&ap=%2526fmt%3D22"></object>
</div>
</body>
</html>