Full height doesn't work of Overlay

Problem

Live site- http://uposonghar.com/new-video/

There is a Embeded YouTube video, if you mouse over on that video(center of the video) Facebook + Twitter share button appears on the left, like this- enter image description here

But that is only working when anyone mouse over center part of embedded YouTube video box, not in whole part. I want to style it like when anyone when mouse over the video box(no matter where) share button appears, share button will be alignment center vertically i any video box height.

My code- HTML-

<div id="video-container">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
  <ul class="share-video-overlay" id="share-video-overlay">
    <li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D-Jkd9GDSyPc">Facebook</a></li>
    <li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&amp;url=http%3A//www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc">Tweet</a</li>
  </ul>
</div>

CSS-

#share-video-overlay {
position: relative;
top: -225px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}

#share-video-overlay:hover { 
opacity:1;
filter:alpha(opacity=100);
}

.share-video-overlay  li { 
margin: 5px 0px 5px 0px;

}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}

.facebook a:link, .facebook a:active, .facebook a:visited { 
color:#fff;
text-decoration:none;
} 

#twitter { 
background-color:#00a6d4;
width: 70px;
padding: 5px;
} 

.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { 
color:#FFF;
text-decoration:none;
}
Problem courtesy of: arifix

Solution

I rewrote your CSS, perhaps this is what you need?

#video-container {
    display: block;
    position: relative;
    width: 600px; //set the video container to the same width/height as the embedded video
    height: 400px;
}
#video-container:after {
    clear: both;
}

#share-video-overlay {
    display: none;
    position: absolute; //absolute positioning to force the element over the iframe
    lef: 0;
    top: 225px;
}

#video-container:hover #share-video-overlay {
    display: block; //clear the float. See http://www.positioniseverything.net/easyclearing.html
}

.share-video-overlay  li { 
    margin: 5px 0px 5px 0px;
}

#facebook {
    color: #ffffff;
    background-color: #3e5ea1;
    width: 70px;
    padding: 5px;
}

.facebook a:link, .facebook a:active, .facebook a:visited { 
    color:#fff;
    text-decoration:none;
} 

#twitter { 
    background-color:#00a6d4;
    width: 70px;
    padding: 5px;
} 

.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { 
    color:#FFF;
    text-decoration:none;
}

In a nutshell: set the container to match the width/height of the youtube video, then position the overlay using absolute positioning. Because it is inside the video container, it will position itself inside the limits of the container.

And: set the hover on the video container, and not the overlay. As said, the overlay is inside the container, so you can easily make the overlay visible on a hover on the container. (#video-container:hover #share-video-overlay { })

I have put the example in a Fiddle so you can test if this is what you need.

Solution courtesy of: c_kick

Discussion

Its because of the height of the share-video-overlay class. Increase height of this class you will get the result. Change the css of share-video-overlay like this

top:-435px;
padding-top:215px;

Set this css as you want and give height to share-video-overlay class height:500px; . I am sure it will work.

Discussion courtesy of: SPViradiya

This recipe can be found in it's original form on Stack Over Flow.