I got the solution. Instead of removing image and replacing again back, just place video above image. Once click on next just hide the video.
To display video:
$('.video').on('click',function(e){
if($(".video img").length) {
var classes = $(this).attr('class').split(' ');
$('.is_video.'+classes[1]+'').val(1);
$('.video_src.'+classes[1]+'').find('video').css('display','block');
$('.video_src_1.'+classes[1]+'').attr('autoplay','autoplay');
var $video = $('.video_src_1.'+classes[1]+'');
$video[0].currentTime = 0;
$video[0].play();
var w = $video.outerWidth();
var h = $video.outerHeight();
$video.css({
marginTop: ($('.graphics_container').height() - h) / 2,
marginLeft: ($('.graphics_container').width()- w) / 2,
});
}
}) ;
Before function in cycle:
before:function(curr,next,opts){
$('.video_src').find('video').css('display','none');
$('.video_src_1').attr('autoplay','false');
var $vidoe = $('.video_src_1');
$vidoe[0].pause();
var $slide = $(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: ($('.graphics_container').height() - h) / 2,
marginLeft: ($('.graphics_container').width()- w) / 2,
});
},