Video background doesn't adapt to device orientation

Hi there.
I have a video background on a header and it is working well with the following exception.

The video adapts to a mobile device’s screen just fine when opened, but if you (whilst the page is open and the video running) rotate your device, the video doesn’t adjust accordingly until the next loop of the video.

I will post a video showing the problem and details of the site and a login in a following private message. Thank you in advance!

Hi Richard,

There could be a plugin or custom code for your video background issue.

I recommend the following troubleshooting procedures before we investigate the settings.

  1. TESTING FOR THEME RELATED ISSUE
  2. TESTING FOR PLUGIN CONFLICT
  3. THEME UPDATE
  4. CHILD THEME
  5. CSS/JS CUSTOMIZATION
  6. DISABLING CACHE
  7. VERSION COMPATIBILITY

Hope that helps and let us know how it goes.

Thank you.

Hi @cramaton, thanks for getting back to me.

I disabled all plugins on the site, cleared site and browser caches and the issue remains I am afraid. Everything appears to be fully up to date as well.

Any further assistance appreciated.

Regards,
Richard.

Hello Richard,

Are you referring to this behavior?

This is because of the browser accelerator. While the browser is busy rendering the video, it cannot accommodate to adapt the video size the same as the browser width. Every time a video is rendered, the browser sets a width and height of the video to make it cover the whole header. This is why as soon as the video play again, it switched sizes.

Hope this makes sense.

Hi, thanks for the info.
That is indeed the issue!

Would there be any workarounds to prevent this behaviour?

Thanks,
Richard.

Hi Richard,

Regretfully, there’s nothing we can do about it and this is really how the browser renders the video when the device orientation is changed.

Hope that helps.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.