How to increase video size when visiting a site. HTML java script possibly JQuery? Video animation
I would like the video to appear in the same window when I visit the site. By doing this, I want to increase the height of the video from 0 to a certain height, and then move the video up a bit from where it is. There is a java script function or jQuery function that allows this. The code would be great with comments, but I'm fine. If there is a site that gives a step by step guide on how to do this. thanks The code I have is:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
var t;
var x;
window.onload=function()
{
x = 0;
while(x < 300)
{
t = setTimeout("nothing();",30000);
x = x + 10;
}
}
function nothing()
{
var b = x + 'px';
document.getElementById("mainvideo").height = b;
};
</script>
</head>
<body>
<div id="header">
<h2>Software Engineering</h2>
<h2>Team Songs</h2>
</div>
<div style="text-align:center;">
<iframe id="mainvideo" width="560" height="315" src="http://www.youtube.com/embed/2SZGW-6AF3A" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
source to share
I suggest you use jQuery.animate () method : http://api.jquery.com/animate/ or slideDown method http://api.jquery.com/slideDown/
In your specific case, I think you should first make sure that the element containing the video will resize without destroying the page layout. Then use
$("#container_div_id").slideDown(1000, function(){
$("#container_div_id").css("position","relative");
$("#container_div_id").css("bottom", "10px");
})
If you want it to slide up then that would be more tricky, as you would need to set the div to the bottom or whatever and maybe change its position property to relative, maybe move it more than you wanted.
source to share