All geek questions in one place

HTML video is displayed only when the window is resized

I am trying to use the vide.js jQuery extension to add a background video to one of my divs. The code for the video disc is as follows:

<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%">

It works sometimes, but if the browser’s cache is cleared and the page refreshes (ctrl / cmd + shift + R in Chrome), the video does not appear until the browser window is resized.

I also tried using jQuery to add video to a div programmatically, to no avail.

You can see the problem live on this address .

+5
source share
1 answer

As far as I can see, the <video> element is not picking the height correctly. css styles styles for height: 100% will fix the problem

+1
source

Source: https://habr.com/ru/post/1246115/

More articles:


All Articles