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>

See elements, arrangements and settings in simulated edition mode

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&amp;byline=0&amp;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