Comment intégrer une iframe vidéo responsive ?
Dans un élément "Texte brut (HTML)" copier-coller le code suivant :
Avec Youtube :
<!-- Styles Flexible iFrame -->
<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe src="https://www.youtube.com/embed/scNkLWV7jSw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
Avec Vimeo :
<!-- Styles Flexible iFrame -->
<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe src="https://player.vimeo.com/video/25118844?title=0&byline=0&portrait=0" width="546" height="307" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>
Avec Dailymotion :
<!-- Styles Flexible iFrame -->
<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe frameborder="0" src="https://www.dailymotion.com/embed/video/xti8g8"></iframe>
</div>
Vous pouvez déplacer l’élément sur la page et appliquer les caractéristiques d’apparence de l’élément "Texte brut, HTML" (Bordures, Marges, Couleurs)
© Source : Alistapart.com | Webdesignerwall.com | Niklaus Gerber
