how to open an iframe in a lightbox on click of a button

Question

I want to open an iframe in a lightbox onclick of a button.

I am using fancybox lightbox for this. But, I am not able to integrate all this.

This is my code:

<div class="mx-header">
       <div class="mx-header-container">
           <a href="http://iradio.s.widget.ldrhub.com/releases/4/index.php?key=iradio&amp;url=http%3A%2F%2Fwww.iradio.ie%2F" title="itakeover" class="itakeover" target="_blank" >iTakeover</a>
         </div>
</div>

and this is the css

.itakeover{
position: relative;
width: 80px; height: 20px; 
background: linear-gradient(to right, #ffc400 , #ff7600);
color: white !important;
font-weight: 400;
font-size: 18px;
padding: 9px 40px !important;
top: 30px;
left: 100px;

}

and this is the screenshot to my page. http://uploadpie.com/R3n3P

I want to do this, on the itakeover button.

Answer 1

Just initialize fancybox targeting the class selector itakeover and set the type to iframe like :

jQuery(document).ready(function($) {
  $(".itakeover").fancybox({
    // API options
    type: "iframe"
  }); // fancybox
}); // ready

See JSFIDDLE