July 20, 2013

Fullscreen mode for a video player

Vhanjan’s Question:

I was trying to make full screen for my video player. I am using JWplayer.. what i want is a full screen like this

var player_width = $(window).width();
var player_height = $(window).height();

Code above wont work for this, i was wondering on how this will work. I was looking for some solution for this but i cant find one. I am getting this kind of result..

Updated:

The fullscreen feature you are trying to omit of youtube is coded in ActionScript in their player. JW Player does not offer this feature. However you can set full screen without measuring the window's height and width like this:

jwplayer('mediaspace').setup({
'flashplayer': '/jwplayer/player.swf',
'width': '100%',
'height': '100%',
});

One trick is too trigger browser default player by linking the direct video link on a link somewhere or on the double click of the player (can be easily done using jQuery)

Another trick is too trigger the full screen of browser as shown here

Earlier Answer:

If you attempting to resize the player based on the screen’s dimension, make sure you are getting the values after the document is loaded and that plugin is initiated after wards.

$(function() {
   var player_width = $(window).width();
   var player_height = $(window).height(); 

   //After this initiate the plugin

});

Except this, there is nothing wrong with your code.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!