L'affichage d'une vidéo YouTube avec iframe largeur de la page

J'ai mis une vidéo sur mon site à l'aide d'un iframe à partir de YouTube, tandis que le iframe est en pleine largeur (100%) la vidéo est de très petite taille (hauteur) de l'image. Comment puis-je l'adapter à la largeur du conteneur?

Code:

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

Voir la capture d'écran

L'affichage d'une vidéo YouTube avec iframe largeur de la page

Double Possible de réduire la taille d'une vidéo YouTube en responsive largeur
Vous essayez de rendre le fond ou en pleine page de la vidéo?
Veuillez montrer le code que vous utilisez afin que nous puissions vous donner une solution possible
Une autre solution rapide est l'utilisation de transform: scale(2); et donner l'iframe moindre z-index

OriginalL'auteur user3005003 | 2016-07-08

  1. 47

    De faire un you Tube Vidéo pleine largeur et de préserver la hauteur (et de le garder réactive) vous pouvez utiliser la configuration suivante.

    HTML avec video

    <div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

    CSS

    .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    Pour une raison quelconque, la vidéo ne s'affiche pas sur Google Chrome sur Android. Toute idée de ce que pourrait être le problème?
    L'ajout de la source: css-tricks.com/NetMag/FluidWidthVideo/...
    Pourquoi le padding-top: 25px; ?

    OriginalL'auteur Web Develop Wolf

  2. 10

    Le problème est qu'une iframe et la vidéo ne peut évoluer comme une image, où il obtient les proportions correctes de la hauteur de base sur le ratio d'aspect si vous laissez la hauteur par défaut.

    Une solution pour cela est de comprendre le natif de la largeur ou de la hauteur de votre vidéo, et faire un peu de math pour comprendre ce que la hauteur doit être à 100% de la largeur de l'écran. En supposant que c'est 1920x1080, vous pouvez faire quelque chose comme ceci en utilisant largeur de visualisation (vw). Vous pouvez réduire la 100vw pour ce qui répond le mieux, si vous ne voulez pas qu'il littéralement remplir l'écran.

    iframe{
 width: 100vw
 height: calc(100vw/1.77);
}
    Merci! Utilisation height: calc(100vw/1.77777778); pour retirer l'excédent de ligne noire.

    OriginalL'auteur will

  3. -1

    Utiliser le plein écran attribut:

    <html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

    Si elle ne travaillait également inclure le code css suivant:

    #myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;

    OriginalL'auteur Saini