Comment puis-je faire le lecteur YouTube échelle de la largeur de la page, mais aussi de garder le ratio d'aspect?
J'ai une vidéo de YouTube, je veux mettre sur ma page web.
Je tiens à l'échelle de la vidéo pour s'adapter à un pour cent des utilisateurs du navigateur, mais aussi pour garder le ratio d'aspect.
J'ai essayé ceci:
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
Mais qui ne fait que rendre le joueur plus large, pas plus.
Ne j'ai du avoir recours à JavaScript (ou non-standard CSS)?
Vous devez vous connecter pour publier un commentaire.
J'ai frappé un problème similaire avec mon site lors de l'élaboration de certains responsive CSS. Je voulais tout intégré Youtube des objets pour redimensionner, avec aspect, lors de la commutation à partir du bureau CSS pour quelque chose de plus petit (j'utilise les media queries pour refaire le rendu de contenu pour les appareils mobiles).
La solution que j'ai opté pour le CSS et marque-place. En gros, j'ai trois vidéo classes dans mon CSS ainsi:
... et je attribuer une de ces au contenu Youtube-je inclure, en fonction de sa taille d'origine (vous pouvez avoir besoin de plusieurs classes, j'ai juste pris les tailles les plus courantes).
Dans la requête de média CSS pour des appareils plus petits, ces mêmes classes sont tout simplement re-précisé comme suit:
J'apprécie cela nécessite un certain mark-up "up-front" quand, y compris les vidéos dans votre code HTML (c'est à dire l'ajout d'une classe), mais si vous ne voulez pas aller en bas de l'Javascript route, cela fonctionne assez bien, vous pourriez re-état de votre vidéo classes pour beaucoup de différentes tailles que vous désirez. Voici comment la Youtube mark-up ressemble:
Ce que je crois être le meilleur CSS solution.
Démo http://jsfiddle.net/JBhp2/
padding-bottom
à 60% pour le grand écran des vidéos.Assez facile avec un peu de javascript.
Ce plugin jQuery a été de faire le tours de la fin, il est appelé FitVids et fait exactement ce dont vous avez besoin, redimensionne les vidéos basées sur la taille du navigateur, tout en conservant les proportions.
http://fitvidsjs.com/
Le truc pour faire une vidéo de youtube, autoresize est de faire de l'iframe width de 100% et le mettre dans un div avec un "padding-bottom" égal au rapport d'aspect en pourcentage. E. g.
Mais le problème - vous avez beaucoup de pages avec embedded YoutTube vidéos déjà. Voici un plugin jquery qui va scanner toutes les vidéos sur la page et de faire d'eux de redimensionner automatiquement en modifiant le code iframe pour être comme ci-dessus. Cela signifie que vous n'avez pas à modifier le code. Inclure le javascript et toutes vos vidéos YouTube devenir d'un redimensionnement automatique.
https://skipser.googlecode.com/files/youtube-autoresizer.js
Vieille question, mais je pense que le @media CSS 3 balises serait utile dans ce cas.
Voici ma solution à un problème similaire.
Le CSS:
Le code HTML:
En fait cela ajoute un point d'arrêt à 768px où la vidéo redimensionne. Vous pouvez également ajouter des points d'arrêt à 992 et 1280 pour un effet encore plus repsonsive taille de la vidéo. (chiffres basés sur Bootstrap tailles standard).
Vous pouvez utiliser deux classes qui serait à l'échelle de la taille de la vidéo en fonction de la taille de l'emballage div. Considérons cet exemple:
Maintenant, regardez le css.
Noter que vous aurez à envelopper l'iframe dans une div qui est la largeur est fixée à 100% et de position relative. Vous devez également ajouter un bas-rembourrage à iframe wrapper. Ce remplissage sera de définir la hauteur d'une vidéo. Je recommande la création de deux classes qui représentent le rapport de l'image.
Il est assez facile de calculer les bas-rembourrage pour des emballages qui représentent une certaine résolution. Par exemple, pour res 4 par 3 et 16 par 9 aurait du bas-rembourrage égale à:
Alors la position de l'iframe comme absolue et poussez-le vers le coin supérieur gauche de la wraping div. Aussi meke assurez-vous de définir iframe width et height à 100%. Maintenant que vous avez à faire une chose de plus. Vous êtes fait.
Ajouter la classe qui correspond à la bonne résolution pour vous. Il met à l'échelle l'image de la largeur et de la hauteur respectivement de garder les bonnes proportions en place.
L'exemple ci-dessus fonctionne pour n'importe quel iframe. C'est dire que vous pouvez aussi l'utiliser pour google maps iframe.
Vous pouvez utiliser
style="max-width: %87; max-height: %87;"
En plus de Darwin et Todd la solution suivante
Le code HTML:
Le CSS:
C'est ce qui a fonctionné pour moi. C'est un peu modifié le code de la YouTube Générateur De Code Embed.
Le CSS:
Le code HTML:
Il ya quelques suggestions sur la liste des réponses à utiliser js pour modifier la structure de la production d'iframe. Je pense qu'il y a un risque avec ça parce que lorsque vous enroulez l'iframe à l'intérieur d'autres éléments, il est possible que l'API YouTube perdra sur "connexion" avec l'iframe (surtout si vous passer l'élément en tant que nœud au lieu d'utiliser l'id comme moi). C'est plutôt de la contourner en fait, l'utilisation de javascript pour modifier le contenu avant de déclencher le lecteur youtube.
un extrait de mon code:
Juste mis en iframe hauteur et en largeur avec le CSS
vw
métrique. Il utilise l'appareil largeur en paramètre:Ajouter du code JavaScript pour donner à chaque youtube iFrame d'une classe:
Puis dans les Requêtes de Média vous utilisez le tube de classe pour définir une taille différente.
Plus facile et optimisé pour la CMS de la manière manuelle.
iframe[src*="youtube"] {}
en css. Comme indiqué ici