A CodePen by Sten Hougaard. Fancybox - iframe in lightbox - A simple boilerplate to using the Fancybox jQuery plugin to open iframe in a lightbox.

index.html

<div class="container fluid">
  <div class="row">
    <h1>Fancybox - iframe in lightbox</h1>
    <blockquote>A simple boilerplate to using the Fancybox jQuery plugin to open iframe in a lightbox.</blockquote>
  </div>
  <div class="row">View my blog <a href="http://www.netsi.dk/wordpress"  data-fancybox-type="iframe" class="various">netsi</a> in an lightbox iFrame, using <a href="http://fancyapps.com/fancybox/"  data-fancybox-type="iframe" class="various">fancybox</a>.
  </div>
<div class="row">
  <h4>HTML</h4>
<code>&lt;a href="http://www.netsi.dk/wordpress"  <strong>data-fancybox-type="iframe" class="various"</strong>&gt;netsi&lt;/a&gt;</code>
  </div>
  <div class="row">
  <h4>javascript</h4>
    <pre>$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 900,
		maxHeight	: 600,
		fitToView	: false,
		width		: '700px',
		height		: '90%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});</pre>
  </div>
</div>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />

script.js

$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 900,
		maxHeight	: 600,
		fitToView	: false,
		width		: '700px',
		height		: '90%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

style.css

strong  {
color: #262626;
}