Ressources en ligne
- Responsive Iframes — The Right Way (CSS Only)! par Ben Marshall. Version PDF.
Solution 1 :
La plus récente, mais pas testée!
Responsive Iframes — The Right Way (CSS Only)! par Ben Marshall. Version PDF.
Solution 2 :
Mise en place dans un projet OK. Source : Fluid Width Video.
|
1 2 3 4 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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%; } |
Solution 3 :
Attention : privilégier la solution #1. La solution #2 fonctionne en demo sur le site de l’auteur, mais j’ai rencontré quelques soucis lorsque j’ai souhaité la mettre en pratique.
Source : Iframe, object & embed responsive.
|
1 2 3 4 5 |
<div class="video" <div class="embed-container" <iframe src="http://www.youtube.com/embed/id-youtube" frameborder="0" allowfullscreen></iframe> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.video{ max-width: /*Largeur de la video*/px; } .embed-container{ height: 0; overflow: hidden; padding-bottom: 56.25%; /* 16/9 ratio */ position: relative; } .embed-container iframe, .embed-container object, .embed-container embed{ height: 100%; left: 0; top: 0; width: 100%; } |
|
1 |
<meta name="viewport" content="initial-scale=1.0" /> |
Solution 4 avec Bootstrap 3
Jamais testé… Bootstrap 3 Tips and Tricks You Still Might Not Know – Responsive Video Embeds that Maintain Aspect Ratio.
|
1 2 3 4 5 6 7 8 9 |
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> </div> |