javascript - Full height doesn't work of Overlay -

live site-

is an embedded YouTube video, if you mouse over that video (center Video) Facebook + Twitter Share button appears on the left side, like-

But it is only working when no mouse embedded YouTube video is on the center part of the box, not in the whole section. I want to like it when someone mouse clicks on the video box (no matter what the difference) button when anyone is visible, I will be the height of any video box by standing in the share button alignment center.

My code-HTML -

  & lt; Div id = "video-container" & gt; & Lt; Iframe src = "// www.youtube.com/embed/-Jkd9GDSyPc" width = "600" height = "400" allowed = "" frameborder = "0" & ​​gt; & Lt; / Iframe & gt; & Lt; Ul class = "Share-video overlay" id = "shared-video-overlay" & gt; & Lt; Li class = "facebook" id = "facebook" & gt; & Lt; A href = "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch% 3Fv% 3d- Jkd9GDSyPc" & gt; Facebook & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "twitter" id = "twitter" & gt; & Lt; A href = "http://www.twitter.com/share?&text=Check+this+video&url=http%3A //www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc"> ; Tweet & lt; / a & lt; / li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

CSS -

  # share-video overlay {location: relative; Top: -225px; List-style-type: none; Display area; Opacity: 0; Filters: alpha (opacity = 0); -WebKit-Infection: Opacity .4s, Top .25s; -MOZ-infection: Opacity .4s, top .25s; -O-Infection: Opacity .4s, Top .25s; Transition: Opacity .4s, Top .25s; Z-index: 500; } # Share-Video Overlay: Hover {Opacity: 1; Filter: Alpha (Opacity = 100); }. Sare-Video overlay li {margin: 5px 0px 5px 0px; } # Function book {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; } .Titter A, .ttt Q: link, .tti A: active, .tti A: visited, .tti a: hover {color: #fff; Text-decoration: none; }  

Let me rewrite your CSS, maybe this is what you want?

# Video-Container {Display: Block; Status: Relative; Width: 600px; // Set the video container as embedded video height for the same width / height: 400px; } #Video-container: after {clear: both; } #Share-video overlay {display: none; Status: Completed; // apply to element on iframe lef Full position: 0; Top: 225px; } #VideoContainer: Hover #Share-video overlay {display: block; // Clear Float View http://www.positioniseverything.net/easyclearing.html} .share-video-overlay li {margin: 5px 0px 5px 0px; } # Function book {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; } .Titter A, .ttt Q: link, .tti A: active, .tti A: visited, .tti a: hover {color: #fff; Text-decoration: none; }

To summarize: Set the container to match the width / height of YouTube video, then place the overlay using the full position. Because this video is inside the container, it will position itself within the container boundaries.

And: Set the hover over the video container, and not the overlay, as is said, is the overlay inside container, so that you can easily make the overlay visible on the hover over the container. ( # video-container: hover # share-video-overlay {} ) ) I have given this example an example so that you can check if you need it.