Mise à l'échelle des iframes pour le responsive design, CSS uniquement

Beaucoup de sites ont intégré les vidéos de Youtube. Youtube fonctionne sur les téléphones maintenant. Si le responsive design est une chose, pourquoi ne devrait-elle pas être une chose pour les images qui contiennent des vidéos de Youtube?

Après avoir cherché pendant des jours (on et off) je ne pouvais pas trouver un clair, simple solution de ce problème (je suis nouveau sur le HTML/CSS). Il est facile à l'échelle iframe width, mais de garder la hauteur relative, j'ai trouvé des morceaux de javascript, jQuery et php, tous assez ésotérique pour un débutant en web design. Je voulais une méthode simple de mise à l'échelle d'une iframe hauteur de toujours garder un certain ratio d'aspect, peu importe la façon dont la largeur changements.

De garder cette d'être une question sans réponse, la méthode ci-dessous. Voici les paramètres initiaux de votre iframe:

<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

.

Je me demandais si quelqu'un avait d'autres solutions.

double possible de réduire la taille d'une vidéo Youtube en responsive largeur
Voir aussi ce post
Maintenant, je me sens stupide de ne pas l'avoir trouvé quand j'ai besoin d'eux.

OriginalL'auteur user1576628 | 2014-01-10

  1. 10

    La solution a été divs imbriqués. Un peu hackey, je sais, mais c'est vraiment une solution simple à un problème qui avait trop de solutions. Les vidéos de Youtube de maintenir un ratio d'aspect de 16:9 dans cet exemple. Votre code devrait ressembler à ceci:

    <div id="outer">
    <div id="inner">
        <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
</div>

    Et votre feuille de style:

    #outer{
max-width: 640px;
max-height: 360px;
width: 100%;
height: 100%;
}

#inner{
    height: 0px;
    padding-bottom: 56.25%;
}

#inner iframe{
    width: 100%;
    height: 100%;
}

    L'extérieur div définit la hauteur maximale et la largeur et permet même à l'échelle, tandis que l'intérieur div utilise le rembourrage attribut correspondent à sa hauteur à la largeur de la div contenant (je suis sûr). La valeur doit être réglée à (height*100/width)%, le rapport de la hauteur à la largeur. L'iframe s'étend à remplir l'ensemble de la div contenant. Les espaces remplit sur le web, donc vous devriez être très bien mettre du texte en dessous.

    Je ne me souviens pas exactement où je l'ai trouvé. Il a été fait avec des images, quelque part sur un Débordement de Pile, mais je pense que c'est important de l'avoir mis au travail pour iframes depuis intégré les vidéos de Youtube sont si communs.

    Voici un JSfiddle à la chose.

    Vous devez définir la division intérieure d'avoir une position relative et de l'iframe pour avoir une position absolue de l'obtenir pour fonctionner. Aussi, si vous ajoutez la marge de zéro pour le haut et le bas et automatique pour la gauche et la droite à l'extérieur de la division, il va le centre.

    OriginalL'auteur user1576628