Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Limelight video as a popup

Avatar

Level 1

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

 

 

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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.