fancybox + iframe with device size > screen detection and resize.

fancybox.js

var width = window.innerWidth;

$(document).ready(function() {
	$(".fancybox").fancybox({
		beforeShow : function() {
			var alt = "Watch more <a href='mypage.html'>videos</a>";
			this.title = alt;
		},
		helpers : {
			title: {
				type: 'inside',
				position: 'bottom'
			}
		},
		//maxWidth: 620,
		//maxHeight: 430,
		fitToView: true,
		width: '100%',
		height: '100%',
		autoSize: false,
		closeClick: false,
		openEffect: 'none',
		closeEffect: 'none',
		overlayColor: '#ddd'
	});

	if (width <= 479) {
		$("a.fancybox").each(function() {
			this.href += '?view=phone';
		});
		$(".fancybox").fancybox({
			maxWidth    : 310,
			maxHeight   : 220,
		})
	} else if (width <= 639) {
		$("a.fancybox").each(function() {
			this.href += '?view=tablet';
		});
		$(".fancybox").fancybox({
			maxWidth    : 465,
			maxHeight   : 330,
		})
	} else {
		$(".fancybox").fancybox({
			maxWidth    : 620,
			maxHeight   : 440,
		})
	}
});