JSFiddle - React, Tailwind, and code Playground

HTML

<div id="la_div">
<h1>&nbsp;Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
<script>
var Div = document.getElementById('la_div');
 
Div.onmouseover = function(){
  this.style.height 		= 	'524px';
};
Div.onmouseout = function(){
  this.style.height 		=	'18px';
};
</script>

CSS

#la_div{
  height:18px;
  width:900px;
  border:1px solid black;
  border-radius:5px;
  overflow:hidden;
    transition:height 1s;
    -moz-transition:height 1s;
    -webkit-transition:height 1s;
    -o-transition:height 1s;
}
#la_div h1{
  background:red;
  margin:0px;
  line-height:18px;
  font-size:16px;
}