IFrame vidéos Youtube Responsive ?

ACDesign27
Les bases HTML/CSS

Hello !

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'utilise l'IFrame mis à disposition par Youtube :

<iframe width="560" height="315" src="https://www.youtube.com/embed/000000000" frameborder="0" allowfullscreen></iframe>

Ce que je veux

J'aimerais pouvoir faire en sorte que la vidéos soit responsive, ainsi quel s'adapte à toutes taille d'écran.

Ce que j'obtiens

Ba... Patakoufin... Une vidéos de 560 de largeur pour 315 de hauteur... Auriez vous une astuce mistère ?

3 réponses

Le_Futuriste
Réponse acceptée

Salut

Tient c'est gratuit :
(à mettre sur iframe + un media querie)

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
ACDesign27
Auteur
Réponse acceptée

Bon j'ai réussi à résoudre mon problème,

Voici mon IFrame Custom Bling Bling :

<iframe src="https://www.youtube.com/embed/000000000" frameborder="0" allowfullscreen class="video"></iframe>

Et ma class container dans lequelle se trouve l'IFrame Custom :

.container{
position: relative; 
width: 100%; 
height: 0; 
padding-bottom: 56.25%;
}

Et ma class video spécial player responsive adaptable à tout terrain hostile :

.video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Sa en revient un peu à la même astuce que Le_Futuriste mais légérement modifié ^^

JeremieMeunier

Salut !

Essais de styliser en CSS avec des min-width et des pourçentage !