Fullscreen mode for a video player

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..

possible duplicate of [How to make in Javascript full screen windows (stretching all over the screen)](http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen) — Bergi, Jul 20 '13 at 12:25

score 0 · Answer 1 · edited May 23 '17 at 12:29

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.

score -1 · Answer 2 · answered Jul 20 '13 at 08:42

-1

function makeBig() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.height = myVideo.videoHeight * 2;
       }
       function makeNormal() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.height = myVideo.videoHeight;
       }

answered Jul 20 '13 at 08:42

Iren Patel

729
1
10
22

thats making it 2x hight. not full screen – VeXii Jul 20 '13 at 09:15

B L Praveen · Answer 3 · 2013-07-20T09:00:10.077

-1

You can change the jwplayer height and width try this

           var windowWidth = $(window).width(); //retrieve current window width
           var windowHeight = $(window).height(); //retrieve current window height
          jwplayer("video_id").resize(windowWidth , windowHeight );

edited Jul 20 '13 at 09:00

answered Jul 20 '13 at 08:44

B L Praveen

1,812
4
35
60

Fullscreen mode for a video player

3 Answers3