Theater mode for video in ASPro script.

October 14, 2016 at 10:39 pm

Here’s short and easy tutorial for ASPro version2 script how to create “theater” mode button for video.

Video player in “Theater” mode is expanded to container’s full width, stays on top of content while the rest of website becomes darkened. Very nice trick that makes user focused on video!

You can see how it works on Modelctv.com video website .
It’s different script, but effect described works exactly same.

Step 1

First you need to modify css file “style.css” in your template “css” directory. Not much to modify.
Find a line:

.content-video {border-top: 0; padding-top: 0; }

Change it to:

.content-video {border-top: 0; padding-top: 0; position:relative; }

Above this line insert new line:

.btn-theater {position: absolute;right: 0;top:-45px; }

Step 2

Now you need to add new line in template file “video_view.tpl.php”, just one line to add.
Find a line:

<div class="left content content-video">

Below in new line enter:

<button class="btn btn-default btn-theater" rel="expand" data-mode="expand"><i class="fa fa-expand"></i></button>

Step 3

Finally little bit longer code to insert into javascript “video.js” file in your template “js” directory.
Find a line:

$("button[id='like'],button[id='dislike']").click(function(e) {

Above from new line insert few new functions:

	function lights(mode) {
		if(mode) {
			if(document.getElementById('full-shade')) {}
			else {
				var shade = $('<div id="full-shade">');
				jQuery(shade).css({'background-color':'#000','left':'0px','top':'0px','bottom':'0px','right':'0px','z-index':'97','position':'fixed'});
				$("body").append(shade);
				$(shade).fadeTo(0, 0.85);
				$("#player-container").css('z-index','98');
			}
		} else {
			$("#full-shade").remove();
		}
	}
	$(document).keyup(function(e) {
        if(e.keyCode == 27 && $("button[rel=expand]").data("mode") == 'compress') {
			$("button[rel=expand]").data("mode","expand");
			$("button[rel=expand]").html('<i class="fa fa-expand"></i>');
			$(".content-video").css('margin-right','320px');
			lights(false);
			$(window).trigger('resize');
		}
	});

	$("button[rel=expand]").click(function(e) {
		switch ( $(this).data("mode") ) {
			case 'expand':
				$(this).data("mode", "compress");
				$(this).html('<i class="fa fa-compress"></i>');
				$(".content-video").css('margin-right','0px');
				lights(true);
				$(this).css('z-index','99');
                                $("header").css('z-index','96');
				$(window).trigger('resize');
				break;
			case 'compress':
				$(this).data("mode","expand");
				$(this).html('<i class="fa fa-expand"></i>');
				$(".content-video").css('margin-right','320px');
				lights(false);
				 $(window).trigger('resize');
				break; 
		}
	});

That’s all.
In Theater mode you can either click button or press Esc key to go back to normal mode. Very useful feature.
It all looks and works even better than you can see on attached screenshots below.

Without Theater Mode

In Theater Mode