在隱藏點擊的視頻上創建div和圖像疊加

Question

我需要這樣的東西。 http://jsfiddle.net/2fAxv/1/ 但第二個div#hide應該在屏幕的左上方留有一定的餘量。無法弄清楚。此外，一旦圖像被點擊了YouTube視頻縮小到默認size.Is有辦法解決它在相同的代碼大小，而不使用

HTML

<div class="vid"> 
    <img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" /> 
    <div id="hide1"> 
     <h3>johnny Depp<br><span>Acting Technique</span></h3> 
    </div> 
</div> 

CSS

.vid { 
width: 350px; 
height: 298px; 
float: left; 
margin: 20px 25px 70px 70px; 
background-size: cover; 
background-position: 0px -50px; 
background-repeat: none; 
} 
.vid div { 
overflow: hidden; 
height: 298px; 
width: 300px; 
background-color: rgba(255, 255, 255, 0.32); 
} 
.vid div h3 { 
position: absolute; 
color: black; 
font-family: 'Montserrat', sans-serif; 
font-size: 30px; 
font-weight: bold; 
padding: 10px; 
background-color: rgba(255,255,255,0.8); 
margin-left: 30px; 
max-width: 450px; 
} 
.vid div h3 span { 
color: black; 
text-align: center; 
width: 300px; 
font-family: 'Source Sans Pro', sans-serif; 
font-style: italic; 
font-weight: 400; 
font-size: 19px; 
} 

功能

$('#hide').click(function() { 
    video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>'; 
    $(this).replaceWith(video); 
    $('#hide1').hide(); 
});