Responsive sur une vidéo VIMEO ou Youtube

12 janvier 2016 VIDEO
VIMEO Vidéo CSS

Il est possible de mettre les embeds iframe de Youtube ou Vimeo au format responsive dans vos page grâce au CSS , ceci est très pratique pour vos pages web ou sites compatible mobile.

Voici le code à installer sur vos pages : 

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>

Le code au niveau de vos embeds (exemple Vimeo)

<div class="embed-container"><iframe src="https://player.vimeo.com/video/134988608" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

La démo :