web-dev-qa-db-fra.com

Affichage d'une vidéo YouTube avec la largeur complète de la page en iframe

J'ai mis une vidéo sur mon site en utilisant un iframe de YouTube, alors que le iframe est en pleine largeur (100%) la vidéo est très petite (hauteur) dans le cadre. Comment puis-je faire correspondre la largeur du conteneur?

Code:

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

Voir capture d'écran

enter image description here

htmlcssiframeyoutube
18
user3005003

Pour créer une vidéo You Tube pleine largeur et conserver la hauteur (et la garder sensible), vous pouvez utiliser la configuration suivante.

HTML avec vidéo

<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%;
}
49
Web Develop Wolf

Le problème est qu'un iframe et une vidéo ne peuvent pas être redimensionnés comme une image, où il obtient la hauteur proportionnellement correcte en fonction du rapport de format si vous laissez simplement la hauteur par défaut.

Une solution à cela consiste à déterminer la largeur/hauteur native de votre vidéo et à faire un peu de calcul pour déterminer la hauteur à 100% de la largeur de l'écran. En supposant que ce soit 1920x1080, vous pouvez faire quelque chose comme ceci en utilisant viewport width (vw). Vous pouvez réduire la valeur de 100vw à celle qui vous convient le mieux si vous ne voulez pas qu'elle remplisse littéralement l'écran.

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}
12
will