how to expand video using javascript command

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

Pergunta

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>
Foi útil?

Solução

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.

Outras dicas

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top