J'essaie de créer un site Web dans lequel le fond est une vidéo. Je cherche des jours sur la façon de recréer quelque chose comme Fond de page d'accueil de Spotify mais ne peut sembler le faire fonctionner.
Mon problème est que je puisse obtenir la hauteur de la hauteur avec le navigateur ou la largeur, mais pas les deux. Contrairement à la vidéo sur le site Web de Spotify, il ne s'adapte pas au navigateur à tout moment. J'ai essayé beaucoup de choses et la plupart d'entre eux, je ne me souviens pas. Cela ne me dérange pas d'utiliser jQuery pour atteindre cet effet.
Mon code actuel est le suivant:
4 Réponses :
Vous devrez avoir un conteneur DIV, qui correspond à l'écran, puis ajoutez une classe à la vidéo qui le redimensionnera à la largeur ou à la hauteur.
CSS: P>
<div class="container"><video class="videoPlayer">Code goes here</video></div>
oldie mais un goldie. Ont eu des luttes avec cela moi-même mais ont constaté que les requêtes de média de l'aspect-ratio font le travail bien.
Si les requêtes de média ne sont pas prises en charge, la vidéo couvrira toujours la page, mais ne sera pas à la balance correctement.
si html: CSS: < / p> TRUCLATEX , TRUCLETY ou @supportts n'est pas pris en charge, la vidéo ne sera pas centrée.
J'ai trouvé ceci:
http://wesbos.com/css-Object-fit/
Utiliser l'objet-Fit: couvercle; sur votre étiquette vidéo
Cela a fonctionné pour moi.
Il convient de noter que, à compter de l'heure de ce bord d'écriture, ne supporte toujours pas complètement l'objet. Il ne supporte que l'utilisation des balises . Caniuse.com/#search=Objectfit
Selon l'objet de commentaire ci-dessus, l'objet Fit fonctionne dans tous les navigateurs pour la vidéo, à l'exception de IE et Edge. Vous pouvez utiliser ici le forum de développeur Microsoft: wpdev.userservir.com/forums/257854-microsoft-ege-developer/.../a> Utilisez un JS Polyfill en attendant, Mais si cela obtient plus de votes, il sera mis en œuvre.
Utiliser Object-Fit: Cover Dans le conteneur
Jetez un coup d'œil au plugin BigVideo.js pour JQuery: DFCB.GITUB.IO/BIGVIDEO.JS: a>
Je ne vois aucune vidéo sur la page d'accueil de Spotify, seulement une sorte de défilement de Parallaxe.
@Leben: Cela ne se produit que si vous visitez leur site Web pour la première fois. Il se réfère à cette page particulière: Spotify.com/fr/Video-splash
Oh d'accord! Ils redimensionnent donc la vidéo avec JavaScript. Vous pouvez passer du temps à élargir leur code pour le comprendre ou utiliser BigVideo.js comme @reinder suggéré.
J'ai essayé de développer leur source pour comprendre ce qu'ils faisaient mais que je ne pouvais tout simplement pas parce que je suis un peu novice. J'ai essayé depuis un moment et tout ce que je pouvais voir, c'est qu'ils changent de valeur de largeur sur l'un de leurs éléments de manière dynamique, car le navigateur change sa largeur. Je vais utiliser le plug-in pour l'instant, mais je veux vraiment apprendre comment je pourrais utiliser JavaScript / JQuery pour redimensionner la vidéo. Merci tout le monde.