Bonjour à tous,
Je fais appel à vous après de nombreux essais et recherches.
J'ai pour un site traitant de création vidéo un background vidéo très joli mais assez lourd (12 à 17 Mo selon webm ou mp4 !) qui n'est affiché que sur des écrans de plus de 768px de large.
Si l'écran est plus petit, on passe à un background photo des plus classiques qui se substitue.
Problème avec l'attribut "display:none" quand on est sur un écran plus petit : cette vidéo est quand même chargée pour ne jamais être affichée... donc temps de chargement très long sur mobile !
J'ai bien essayé des "async", "defer" mais aucun moyen de faire marcher ça sur une vidéo.
Seule solution jusqu'ici, ajouter un media query sur ma source, et là la vidéo n'est plus chargée...
Pas mal, mais du coup si on redimentionne la fenêtre pour dépasser 768px, la vidéo n'est pas lancée, il faut recharger la page.
Si vous avez une solution pour que ça se charge quand on atteint les 768px ? Un truc moins bricolé ?
Je fais appel à vous après de nombreux essais et recherches.
J'ai pour un site traitant de création vidéo un background vidéo très joli mais assez lourd (12 à 17 Mo selon webm ou mp4 !) qui n'est affiché que sur des écrans de plus de 768px de large.
Si l'écran est plus petit, on passe à un background photo des plus classiques qui se substitue.
Problème avec l'attribut "display:none" quand on est sur un écran plus petit : cette vidéo est quand même chargée pour ne jamais être affichée... donc temps de chargement très long sur mobile !
J'ai bien essayé des "async", "defer" mais aucun moyen de faire marcher ça sur une vidéo.
Seule solution jusqu'ici, ajouter un media query sur ma source, et là la vidéo n'est plus chargée...
<video id="vidbak" preload="auto" autoplay loop muted>
<source src="video/background.webm" type="video/webm" media="screen and (min-width: 768px)">
<source src="video/background.mp4" type="video/mp4" media="screen and (min-width: 768px)"> Pas mal, mais du coup si on redimentionne la fenêtre pour dépasser 768px, la vidéo n'est pas lancée, il faut recharger la page.
Si vous avez une solution pour que ça se charge quand on atteint les 768px ? Un truc moins bricolé ?