Responsive not working with posterImage.show()

[umbreak]

Like described in this thread, responsive CSS configuration is not working at the same time with the posterImage attribute.

A responsive configuration which works, is described here and the use of posterImage is exemplified here. But both things together do not work.

Is there some solution for it?

[heff]

I'm not seeing any obvious issues with the jsbin example provided. Can you fill in the following details?

What did you do? (steps to reproduce)
What happened? (actual results)
What should have happened? (expected results)
What version of Video.js, and any plugins used?
What browsers and platforms does this occur/not occur on?
Is there a link to an example online?
Can a reduced test case be created? (e.g. a jsbin or JSFiddle (if Flash is involved))

[umbreak]

The example is correct (is the one you provided in another post). And what that example achieve is that, once the video is finished, it goes back to it's initial state (poster shown, play button shown, position=0).

Like I said, the problem is the compatibility/integration between the attribute posterImage and responsive CSS. When this CSS is present, the poster image will not be shown even if posterImage.show() is called (note that, for example, bigPlayButton.show() it works).

This is a full example of what I am describing.

If the wrong part is the CSS provided in my example, could you suggest some other CSS which would make the video responsive and at the same time do not loose the capability to show the posterImage?

VideoJS 4.6.3.
Firefox 30.0
Chrome 35.0.*

[mmcc]

Ok so this makes sense. Really what I would suggest doing would be to restart the player using some of the built-in functionality rather than showing the poster, big play button, etc by hand. However, while debugging this we realized the poster image hasn't been updated to hide / show via CSS yet (pull requests welcome!), so that still needs to be fixed. In the meantime, you can do something like this:

var video = videojs('my_video_1');
video.on('ended', function() {
  video.trigger('loadstart');
  video.posterImage.show(); // This shouldn't be necessary after the fix.
});

working example

[umbreak]

Changing the script from your code in the example I provided doesn't change anything. The first image is still not shown when the video ends.

[mmcc]

So the issue is that the poster is set to 100% height and width of the parent element, which has no height or width because of the responsive workaround you're using. You can get around this by absolutely positioning the poster image instead, like this:

.vjs-poster {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Fixed example. Note to self (and other contributors), this is probably going to be necessary if we implement #982.

[mmcc]

I'm going to close this as an issue and move the comment over to the thread on responsive sizing. Thanks for the catch!