0

I used lots of video player plugins in my Wordpress website, but I have problems in fullscreen mode.

In fullscreen mode, the video only extends to the size of the wrapper (parent div) not the real view size.

It just happens in Google Chrome. In Firefox the fullscreen mode works as intended.

An example would clear the issue. There is a video at the end of this post: http://yon.ir/rr288

Apparently it's about jQuery.

When I use jQuery with a version lower than 1.6.4, there is no issue with fullscreen mode. But the problem is that I need a jQuery with higher version for my other plugins.

Any help would be appreciated.

Update: Obviously thousands of users are using the video players I have tested with default version of jQuery and had no problem, so it can be something else causing the problem.

PooMer
  • 1
  • 1

2 Answers2

0

I had that problem with a web program I did at work. In newer browsers versions it appeared fullscreen, in old it only fill till parent container (not exactily the same case but the same problem). What I did was modify the function onClick() that called fullscreen. The function was in a min javascript like your case (video.js) maybe is not very apropiate to do that. You could just do a new listener for that event and stop the default one. I did modify the min file but I know it's not fancy :P

Looking video.js thanks to browser link it seems function of fullscreen is here:

e.V=function(c){
if(!e.disabled)
{c=u.ic(c);var d=e.z[c.type];if(d)for(var d=d.slice(0),k=0,r=d.length;k<r&&!c.pc();k++)d[k].call(a,c)}}

So I supose e is the event and if you disable it if browser is chrome it won't enter to the function and then you could do another instead.

Shil Nevado
  • 716
  • 1
  • 11
  • 30
  • If you need help stoping the event, look [this post](http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) (for example) if I didn't give you enought information ask me more :) – Shil Nevado May 15 '16 at 23:45
  • Thanks for reply, but the problem is I know a little PHP, HTML and CSS and nothing about JS. Also I was looking for a better solution. Actually I was wondering if there is a way that I could manage the jQuery each plugin is using or something better. Other than that I'm sure thousands of users are using these plugins with default version of jQuery, so it can be something else causing the problem. – PooMer May 16 '16 at 07:24
0

OK, I got it.

The problem was a CSS property of the container:

-webkit-animation-fill-mode: both;
animation-fill-mode: both;

I had to add an event so when the player is in fullscreen mode these two property value change to "none".

P.S. Sorry for my bad English

PooMer
  • 1
  • 1