I created a popup window to display video. When i click a link the attribute value of 'data-vid-link' will be copied and placed inside te 'src' attribute of the video source sitting inside the popup. The video attribute 'src' is empty before click. After clicking the link it will be replaced with the copied value.
In so far it works fine. But when the popup emerges the video does not appear. But the strange thing is when i look in the source code the video link is copied succesfully.
If i insert it manually it works fine.But thats not what i want...
<article>
<header class="bubble">Video display</header>
<a href="" data-vid-link="vid/moviesample.mp4" class="vidlnk"><img src="images/tmb-vidpl.gif"></a>
</article>
This is the popup div with the video src empty before click..
<div class="overlay"></div>
<div class="popup">
<span class="close"></span><video controls><source src="" type="video/mp4">Your browser does not support the video tag.</video>
</div>
This is the jquery
$('.vidlnk').click(function(event){
event.preventDefault();
var attr = $(this).attr("data-vid-link");
$('video source').attr('src',attr);
$(".overlay,.popup").show();
$(".popup").center();
});
And the css code for the popup and overlay
.overlay {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(204,204,153,0.5);}
.popup {display:none;width:50%;height:auto;position:fixed;z-index:200;}
.close {position:absolute;top:-31px;right:0px;background:red;padding:0px 10px;color:white;font-size:1.4em;}
.close:before {content:"x";font-weight:bold;}
.close:hover {cursor:pointer;}
video {width: 100%!important;height: auto!important;}
