Limelight video as a popup | Community
Skip to main content
V
Vineethakolipaka
October 7, 2022
Solved

Limelight video as a popup

  • October 7, 2022
  • 1 reply
  • 594 views

Hi,

Image component has a URL action like limelight video as a popup. On click of the image need to get limelight video as a popup.

Thankyou in Advance.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by B_Sravan

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">&times;</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.

 

 

 

1 reply

B_Sravan
Community Advisor
B_SravanCommunity AdvisorAccepted solution
Community Advisor
October 8, 2022

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">&times;</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.

 

 

 

    Terms & ConditionsAccessibility statement

    Loading footer...