Intégrer une vidéo Youtube, Dailymotion ou Vimeo à son site est simple et très facile grâce aux codes <iframe> ou <embed> offerts par ces différentes plateformes vidéos. Mais rendre le format de la vidéo intégrées adapté pour une lecture sur les supports mobiles et sur tablettes et pour les sites HTML5 responsive design est un peu plus difficile.
Heureusement nous avons trouvé la solution pour adapter la taille de vos vidéos Youtube aux mobiles et nous allons vous l'expliquer brièvement.
Pour redimensionner une vidéo YouTube pour l'adapter à tout navigateur ou tablette / appareil mobile pour une conception adaptée au Responsive Design, vous pouvez utiliser soit le CSS ou le Javascript.
Cet exemple utilise une solution de CSS, vous devez ajouter un couple de styles CSS dans votre fichier CSS principal.
Dimentionner une video Youtube pour mobile sur blogger
Etape 1 : Ajouter ces lignes à votre fichier CSS ou au modèle de votre template blogger dans la partie dédiée au contenu, souvent nommée CONTENT WRAPPER
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Etape 2 : Dans votre article ou dans le contenu où vous souhaitez intégrer la vidéo Youtube, accéder au volet HTLM (le code) et placer le code embed ou iframe de votre vidéo ainsi :
<div class="video-container">Le code iframe de la vidéo</div>
Pour les Pro, vous pouvez trouver plus de solutions ici ou encore dans cet article de J. Rousseau .
Tuto pour rendre les vidéos Youtube Embeded responsive (en anglais)
Merci Web Mag , et bonne navigation mobile !