Owl Carousel pas l'affichage des vidéos
J'ai un exemple ici: VideoSlide Exemple
Mon problème est que rien ne s'affiche.
J'ai effectivement copié le code de la Chouette site, mais je reçois rien ne s'affiche.
À l'origine, j'avais codé dans un site plus grand, c'est la version réduite avec seulement applicable sur le carrousel. J'ai le carrousel de travailler avec des images, mais les vidéos échapper à moi, si quoi que ce soit, les vidéos se ressemblent, ils devraient être plus simple!
J'ai pris la dernière de la Chouette JS et CSS pour la version 2.
Je n'ai pas modifié le JS ou CSS, c'est qu'il est téléchargé état.
J'ai fait une comparaison avec le code de avec Owl page pour les vidéos et Calvin College, qui utilise également le Owl carousel avec des vidéos.
Aussi loin que je peux voir, j'ai fait la même chose.
Évidemment, je n'ai pas.
Debbie
OriginalL'auteur Deborah Taylor | 2014-10-04
Vous devez vous connecter pour publier un commentaire.
de la chouette site sur vidéo de démonstration fait a un style de
.article-vidéo
L'ajouter à votre propre feuille de style css, et vos vidéos vont s'afficher si vous utilisez le même balisage comme la vidéo de démonstration.
Les options mentionnées sur la documentation n'ont aucun effet, donc je suppose qu'il pourrait être une meilleure idée pour owl 2.0 pour sortir de la bêta (2.0.0-bêta.2.4 au moment de ce post).
OriginalL'auteur visitsb
Un complément pratique à la visitsb la réponse est le fait que la plupart des vidéos ont un ensemble de rapport d'aspect (16:9). Ainsi, vous pouvez utiliser l'aspect normal CSS padding astuce pour envelopper chaque élément de la vidéo dans des proportions fixes conteneur.
Plus précisément, envelopper les éléments vidéo comme ceci:
Puis ajouter le code CSS suivant pour fixer chaque élément en 16:9:
OriginalL'auteur Stewart French
Comme visitsb dit, vous pouvez définir les vignettes hauteur de CSS. Vous obtiendrez un joli carrousel avec un fond noir.
Cependant, les options indiquées dans la documentation ne fonctionne que lorsque les deux sont ensemble (à partir de le code source)
Le résultat avec la première solution est plus joli.
OriginalL'auteur gabriel
Vous pouvez utiliser le fluide de la largeur de conteneurs vidéo pour pousser la hauteur plutôt que de fixer la hauteur avec les css. En faisant cela, vous pouvez éviter toute noir de baguage et de vos vidéos seront flush avec le conteneur et la volonté de maintenir ratio parfait sur redimensionner.
Vous aurez besoin de modifier le css de l'élément-vidéo de sorte qu'il jouera nice.
En outre, vous pouvez également rendre l'image de la couverture de remplir la diapositive et de perdre que de baguage.
La vidéo wrapper que j'ai utilisé était 16x9 mais tout fluide largeur wrapper de travail. Voici celui que j'ai utilisé.
source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
OriginalL'auteur lucidlips
Juste rapide de l'inspection de la console, on dirait de la chouette js n'est pas chargé.
OriginalL'auteur
SI vous voulez ouvrir la page sans passer par le serveur et d'avoir ces erreurs:
net::ERR_FILE_NOT_FOUND
entrez la description de l'image ici
D'ouvrir le fichier:
owl.carousel\dist\owl.carousel.js
ou
owl.carousel\dist\owl.carousel.min.js (si vous utilisez rapetisser version sur le site)
Et ajouter un protocole, par exemple:
entrez la description de l'image ici
OriginalL'auteur a_vedenin
J'ai dû ajouter manuellement une hauteur de
.owl-video-wrapper
et il semble être OK maintenant.Espère que cela aide quelqu'un dans le futur. C'est un peu bizarre.
OriginalL'auteur Matt