Event on video poster loaded

Question

I've found a problem.

I have a video element in modal dialog, with poster image setup. After I open a modal, the poster is not fully loaded, so the dialog is not bigger than screen, so modal is not scrollable. After poster image is loaded, modal will stretch but it does not trigger event that should recount if modal should be scrollable.

I thought about some event on video poster load, but did not find something like that. How would you solve this?

Thank you.

Answer 1

Hey good catch about this missing event.

What I would do : preload the image with an <img> element and wait for its loadevent.

snippet.log('before:  '+video.getBoundingClientRect().width)
var img = new Image();
img.src = video.getAttribute('poster');
img.onload = function(){snippet.log('loaded: '+video.getBoundingClientRect().width);}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<video id="video" poster="http://lorempixel.com/800/300"></video>