Follow two steps for implementation
Step 1: Add below section to Head Tag
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
<script src=”js/jwplayer.js” type=”text/javascript”></script>
<link href=”ModalPopup.css” rel=”stylesheet” type=”text/css” />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>
<script type=”text/javascript”>
function DisplayVideo(obj) {
var s = obj;
$(“#dialog-modal”).dialog({
resizable: false,
height: ‘auto’,
width: ‘auto’,
modal: true
});
jwplayer(“mediaplayerid”).setup({ //To open a Player in a Dialog Box
flashplayer: ‘Jwplayer/jwplayer.flash.swf’,
provider: “video”,
file: s,
title: ‘Demo Video’,
image: ‘noimage.jpg’,
autostart: false,
allowfullscreen: ‘true’,
width: ‘380’,
height: ‘250’,
logo: {
file: “druplicon-polska-small.png”,
link: “https://dotnettricks-abdul.in”
}
});
}
</script>
Step 2: Add below section to Design Page or Aspx Page
<a href=”javascript:void(0)” id=”showvideo” onclick=”DisplayVideo(‘video.mp4’);”>Video 1</a>
<img src=”druplicon-polska-small.png” onclick=”DisplayVideo(‘video.mp4’);” style=”cursor:pointer” />
<div id=”dialog-modal” title=”Video”>
<div id=”mediaplayerid”>
</div>
</div>
Download:
Modal Popup Css: Modal Popup Css
Jw Player Js and Flash Player: JS and Player
Video : Video
