how to expand video using javascript command

StackOverflow https://stackoverflow.com/questions/23453215

Question

im pretty new to javascript and havent had html done in awhile.. so basically i need to create this animation on web page that the video expands and starts playing only when the mouse hovers over it and it is also link to another page. My button onMouseOver doesnt seem to trigger the event, can someone give me the code pls

<head>
<style type="text/css">
div#box1 {


}
</style>

<script>

function slideopen(el){
var elem = document.getElementById(el);
elem.style.transition = "height 1s"
elem.style.width = "320px"; 
}



</script>
</head>
<body>
<button onMouseOver="slideopen('box1')"></button>

<div id="box1">

<video width="300" height="600">
<source src="africafinal.mp4"  type="video/mp4">

</div>


 </body>
Was it helpful?

Solution

You need to define the starting height and the target height. Currently, you don't tell the browser what the target height shall be, just that there is a transition. That won't work.

OTHER TIPS

Your function sets a transition on height, then changes the width. I don't think that's what you meant to do.

In your style block, set the height to 0 and set your transition speed. In your function, just set the new height. That should fix it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top