IFrame vidéos Youtube Responsive ?

Par ACDesign27, il y a 9 ans

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

JeremieMeunier, il y a 9 ans

Salut !

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

Le_Futuriste, il y a 9 ans

Salut

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

position: absolute; top: 0; left: 0; width: 100%; height: 100%;
ACDesign27, il y a 9 ans

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é ^^