jqueryhtmlfancybox-3

how to add extra content in fancybox 3 iframe?

For example i have this url

<a data-fancybox data-type="iframe" data-src="/webrtcv2/" href="javascript:;"><i class="fa fa-video-camera" aria-hidden="true"></i></a>

its showing usually just iframe the url but i need to add this extra div content out the iframe not inside the iframe

<div id="video-content" class="video-link" >
<a id="iframelink" class="link-id-videochat" href="">Send invitation</a>
</div>

This is my fancybox 3 code

$(document).ready(function(){

$('[data-fancybox="iframe"]').fancybox({
    toolbar  : false,
    smallBtn : true,
    iframe : {
        preload : true
    }
})
});

And the final result will be exactly like that enter image description here

Solution

  • The simplest solution would be to use afterLoad callback to clone and append your form inside content area, example:

    JS

    $("#test").fancybox({
  afterLoad : function(instance, current) {
    current.$content.append( $('#video-content').clone(true).show());
  }
})

    CSS

    .fancybox-slide--iframe .fancybox-content {
  max-width: 500px;
  max-height: 200px;
}

#video-content {
  position: absolute;
  top: calc(100% + 20px);
  background: #fff;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;
}

    DEMO - https://jsfiddle.net/18hbr7oe/