Video pop up code

[Valentina]

Hi everyone,


Could any of you please help me on finding a code for a video pop up, that works by clicking on an image.
I have searched online a lot for a code; but I could only find codes that work by clicking on text.
Every tip or help is appreciated, thank you very much in advance.

 

[Jim_Wick]

Hi,
I will help you with code and make changes accordingly in HTML, CSS,JS

HTML:-
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="text-center display-4 mt-5">
Web Design & Content Management Software
</h1>
<p class="text-center mt-5">
<a href="#headerPopup" id="headerVideoLink" target="_blank" class="btn btn-outline-danger popup-modal">See Why Solodev WXP</a>
</p>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" width="854" height="480" src=""Link of your video" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

CSS:-
#headerPopup{
width:75%;
margin:0 auto;
}

#headerPopup iframe{
width:100%;
margin:0 auto;
}


JS:-
$(document).ready(function() {
$('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true
});
});


Try to make changes accordingly.. It will help you for sure.
Greetings,
Jim_Wick