Diapo adaptatif haut/bas div onclick

J'ai un lien qui, lorsqu'on le clique, doit glisser vers le haut ou glisser vers le bas (selon l'état) un DIV qui contient une vidéo pleine largeur réactive. Comme son responsive et son une vidéo grand écran, la hauteur ne peut pas être réparée (mon code existant fait cela et doit changer). Ce DIV (contenant la vidéo) doit être caché au chargement de la page.Diapo adaptatif haut/bas div onclick

J'ai mon code existant ici: http://jsfiddle.net/D5EMp/ qui fonctionne dans une certaine mesure en ce qu'il cache/affiche la vidéo. Cependant, le principal problème est que la hauteur de la vidéo est visible sur le chargement de la page et crée un espace vide. J'ai besoin que la vidéo glisse vers le bas/vers le haut ET que la barre noire horizontale glisse vers l'avant/vers l'arrière tandis que le contenu situé sous cette zone est poussé vers le bas ou vers le haut lorsque l'état du diaporama change.

Un bonus serait d'ajouter une fonctionnalité qui lorsque le lien est cliqué, la page défile à cette ouverture DIV.

Source

2012-09-17 egr103

Le rembourrage que vous ajoutez dans votre css est à l'origine de l'écart:

padding-bottom: 56.25%; /* 16/9 ratio */ 
padding-top: 30px; /* IE6 workaround*/

Vous pouvez animer ce remplissage lorsqu'il est affiché, example here, mais il semble que la vidéo soit désordonnée sur Firefox.

Je calculerais la hauteur correcte avant d'essayer d'animer à cette hauteur, et n'utiliserai pas de rembourrage du tout. Pour obtenir la bonne hauteur pour une vidéo 16/9, vous divisez juste la largeur par 16 puis multiplier par 9. Exemple de travail:

http://jsfiddle.net/D5EMp/2/

Pour faire défiler automatiquement la page en haut de la vidéo que vous peut mettre cela en tant que fonction complète de l'Animer:

function(){$('html, body').scrollTop($('#showreel').offset().top);}

Exemple: http://jsfiddle.net/D5EMp/4/

Source

2012-09-17 11:11:03 Timm

Merci pour votre réponse, je vois ce que vous voulez dire. Y at-il un moyen de ne pas animer le calcul de remplissage? Donc, par exemple, je clique sur le bouton, un calcul de la taille de la vidéo nécessaire pour remplir la largeur est faite, puis un wrapper DIV glisse vers le bas (pour s'adapter à la taille calculée), puis la vidéo se fane dans le haut? Et vice-versa lorsque vous cachez la vidéo? Cela peut-il être fait? – egr103

Comme ça? http://jsfiddle.net/D5EMp/6/ – Timm

Ouais c'est génial, est-ce que cette méthode pourrait aussi être sensible? Par exemple, lorsque vous redimensionnez le navigateur, la vidéo ne se développe pas avec la fenêtre (en laissant des barres noires sur le côté), cela peut-il être réactif? – egr103

l'espace vide provient du remplissage que vous avez défini sur #showreel, il suffit de le supprimer.

un coup d'oeil à http://jsfiddle.net/D5EMp/1/

le plus gros problème est de savoir comment connaître la taille de la vidéo. mais dans mon esprit, il est impossible de connaître la taille d'une vidéo avant qu'elle ne soit chargée. et l'accès à iframe conduira à des problèmes inter-domaines.

em, vous pouvez rechercher une autre façon de résoudre ce problème, non seulement par la technologie

qui est mon idée

Source

2012-09-17 10:59:36 xiaohao

en ce qui concerne les questions de domaine croix, la vidéo Vimeo sera changé pour une vidéo qui sera hébergé sur mon propre serveur (en utilisant HTML5) . Je n'ai pas encore cette vidéo donc en utilisant Vimeo comme solution de gap astop :) – egr103

Diapo adaptatif haut/bas div onclick

Répondre

Questions connexes