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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
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.

 

 

 

The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now