Reply To: Lightbox video on the home page slider.

November 29, 2013 at 1:54 pm #1415
Support
Keymaster

Slide HTML:

<li data-transition="fade" data-slotamount="13" data-masterspeed="300" >

	<img src="img/slides/slide-bg.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

	<div class="tp-caption customin customout"
		data-x="center" data-hoffset="0"
		data-y="center" data-voffset="0"
		data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;"
		data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
		data-speed="800"
		data-start="700"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeIn"
		style="z-index: 3">
			<a class="popup-youtube" href="http://www.youtube.com/watch?v=hcIq2OSZQSc">
				<img src="img/projects/project.jpg" alt="">
			</a>
	</div>
</li>

Add to js/custom.js

$(document).ready(function() {
	$('.popup-youtube').magnificPopup({
		disableOn: 700,
		type: 'iframe',
		mainClass: 'mfp-fade',
		removalDelay: 160,
		preloader: false,

		fixedContentPos: false
	});
});