I recently attempted to incorporate the vide.js jQuery extension into my project in order to implement a video background within a div element. Below is the code snippet for the video div:
<div id="header" data-vide-bg="mp4: graphics/videos/identity.mp4, webm: graphics/videos/identity.webm, ogv: graphics/videos/identity.ogv, poster: graphics/videos/equations.png" data-vide-options="posterType: 'detect', loop: true, muted: true, position: 0% 0%">
Although it functions correctly on occasion, I have noticed that after clearing the browser cache and refreshing the page (using ctrl/cmd + shift + R in Chrome), the video fails to display until the window is resized.
In an attempt to resolve this issue, I also experimented with using jQuery to dynamically add the video content to the div but encountered no success.
To observe this problem firsthand, please visit this particular webpage.