web-dev-qa-db-fra.com

Redimensionnement automatique de la vidéo intégrée YouTube

Je construis un site Web qui, je l'espère, sera fortement axé sur les vidéos youtube incorporées, mais le code incorporé ne vous permet que de spécifier une largeur, ce qui pose problème en ce qui concerne l'aspect réactif de l'ensemble du mobile auquel nous sommes tous de plus en plus confrontés. respecter.

Alors, est-il possible de changer les dimensions d'une vidéo uniquement en fonction de la largeur de l'écran ou du mode CSS @Screen?

Il ne s’agit pas d’une largeur totalement réactive. Dans l’idéal, je souhaiterais que la vidéo complète soit lue à l’afficheur 400px, et l’apparence mobile à 0px.

Quelles sont les options?

mobilevideoresponsive-webdesignembed
1
Unhappy Blogger

Vous pouvez essayer ceci:

Supprimez la hauteur et la largeur du code incorporé, placez-le entre une classe div et ajoutez une classe à l'iframe de la manière suivante:

    <div class="youtube">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

Ensuite, vous devez le faire dans le css:

//this goes to the embed container div class
.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

//the class you give to the iframe
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

La classe . Youtube a une largeur de 100% et un fond de remplissage de 56,25%. Ce pourcentage est le résultat de 9/16 (car nous utilisons une résolution de 16: 9 sur cette vidéo). Vous pouvez ajuster le pourcentage de remplissage inférieur en fonction de la résolution souhaitée.

Dans ce site vous trouverez plus d'informations à ce sujet, mais ce code devrait fonctionner

2
franfernandz