Hi @Vineethakolipaka ,
do you mean that you wanted to play a video on popup window on clicking the image?
check this code, you can run it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<div type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img src="${properties.ImagePath}" alt="alt-text" width="500" height="600"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Things to do:
1. Have a HTML (component HTML) for you modal popup and have your video in the iframe (or you can use video tags)
2. Have the js in your client library, use onClick function to trigger the modal.
3. Make the image and the embed code of the video author-able.
check this link for an example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img
Thank you.
