Нужна ваша помощь
 

Мне нужно что бы при нажатии на картинку открывалось окошко и там проигрывалось видео. Я нашел такое решение

<div class="b-container">
    Sample Text
    <a href="javascript:PopUpShow()"><img alt="картинка плей" src="/upload/image/temp/video.png" style="height: 67px; width: 76px;" title="картинка плей" /></a>
</div>
<div class="b-popup" id="popup1">
    <div class="b-popup-content">
       <iframe width="560" height="315" src="//www.youtube.com/embed/A_B49rgCi4A" frameborder="0" allowfullscreen></iframe>
    <a href="javascript:PopUpHide()">Hide popup</a>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
}
function PopUpHide(){
    $("#popup1").hide();
}
</script>

только вот возникла проблема у меня на станице не одно видео а если я пишу такой же код только меняю ID он не работает. Кто что может посоветовать. Заранее спасибо.

кажется я понял дело в css(

*{
    font-family: Areal;
}
.b-container{
    width:200px;
    height:150px;
    background-color: #ccc;
    margin:0px auto;
    padding:10px;
    font-size:30px;
    color: #fff;
}
.b-popup{
    width:100%;
    min-height:100%;
    background-color: rgba(0,0,0,0.5);
    overflow:hidden;
    position:fixed;
    top:0px;
}
.b-popup .b-popup-content{
    margin:40px auto 0px auto;
    width:560px;
    height: 315px;
    padding:10px;
    background-color: #c5c5c5;
    border-radius:5px;
    box-shadow: 0px 0px 10px #000;
}