I am using iFrame to play a video, but the video runs on that page/screen itself. But I want that when the user clicks on the video a pop-up/modal screen comes where the user can watch the video. I have used the below code. What can be the possible changes to achieve this.

<div class="slds-grid slds-wrap">  
    <div class="slds-size_12-of-12">
        <div class="slds-p-around_x-small">
            <aura:iteration items="{!v.lstContentDoc}" var="CD">
                <aura:if isTrue="{!CD.JP_lessonID__c==v.Param}">
                <aura:if  isTrue="{!and(CD.FileType=='PDF',CD.JP_Video_URL__c!='')}">
                    <div class="slds-grid slds-gutters slds-wrap">
                <div class="slds-col slds-size_1-of-1 slds-medium-size_3-of-12 slds-large-size_3-of-12">
                    <span><iframe style="width:-webkit-fill-available;border:1px solid #ccc;" src="{!CD.JP_Video_URL__c}"></iframe></span>
                            <div class="slds-media__body">
                                <a href="#">
                                    <div class="slds-page-header__name">
                                        <div class="slds-page-header__name-title">
                                                <a class="slds-page-header__title slds-truncate" title="{!CD.Title}" onclick="{!c.previewFile}" data-Id="{!CD.ContentDocumentId}">{!CD.Title}</a>


I have done this in Html using css.

You can also write custom css in your aura component rather then using iframe.

Below is the code for your reference

.popup .popuptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
<body style="text-align:center">
<div class="popup" onclick="myFunction()" ><button>Preview</button>
<video class="popuptext" id="myPopup" style="width:800px;" >
<source src="dolby-atmos-intro.mp4" type="video/mp4">
function myFunction() {
var popup = document.getElementById("myPopup");

if (popup.paused){ 


Please tell me if you need more help.

  • Hi actually I want the user to click on the video and that opens a modal where the video is played not a button. Can you give any suggestion for that Feb 4 '20 at 17:34

I got the solution for this I created a div with z-index=1 and made the iframe's z-index -1, so whenever user clicks on the video due to to z-index it gets click on the div which pops up a modal

                <div class="video_overlays" onclick="{! c.openModel }" style="z-index:999;position:absolute;" aura-id="custom" data-attriVal="{!CD.JP_Video_URL__c}"> </div>
                <span><iframe id="my_iframe" style="min-width:300px;height:150px;z-index:-999;" src="{!CD.JP_Video_URL__c}" allowfullscreen="allowfullscreen"
webkitallowfullscreen="webkitallowfullscreen" frameborder="0" ></iframe></span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.