PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 20/01/2018 15:36:07

Carambozilla
Membre
Inscription : 27/12/2017
Messages : 19

Rendre responsive les vidéos embarquées

Bonjour à tous,
les vidéos "embed" dans PluXml s'affichent bien sur ordi, mais sortent du cadre sur mobile.

Pour les rendre responsive, un bout de code que j'ai trouvé ici [http://www.studiovitamine.com/blog/comm … esponsive/]
et qui fonctionne très bien.

J'utilise le thème PluxMag [http://forum.pluxml.org/viewtopic.php?id=5168]
Dans les CSS

[== CSS ==]

video {
	display: inline-block;
	vertical-align: baseline;
}

/* VIDEO CONTAINER
------------------------------ */
.video {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}

.video iframe,
.video object,
.video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding: 15px 0;
}

Et dans le code de la page :

[== XHTML ==]
<div class="video-conteneur">CODE_IFRAME</div>

et au passage, si vous voulez squizzer la pub sur les vidéos YouTube que vous faites apparaître sur vos pages, une petite astuce :

[== XHTML ==]
<div class="video">
<iframe width="700" height="394" src="https://www.youtube-nocookie.com/embed/XXXXXX?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

testée ici [https://www.pascale-varenne.fr/blog/edi … -coloriste]

Hors ligne

#2 20/01/2018 17:22:37

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 342

Re : Rendre responsive les vidéos embarquées

Bonjour Carambozilla
Avec plucss on a déjà cette classe avec

[== XML ==]
<div class="frame"> 	<iframe>...</iframe> </div>

Regarde dans le fichier sidebar.php à la fin il y a le code vidéo YouTube commenté
Merci pour l'astuce de la pub
Ciao

Dernière modification par Dudy (20/01/2018 17:44:43)

Hors ligne

#3 20/01/2018 17:56:29

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 933
Site Web

Re : Rendre responsive les vidéos embarquées

La taille en % se rapporte au bloc (<div>) qui contient la vidéo.
Il n'est pas dit que ce bloc occupe tout l'écran.

Il vaut mieux se référrer à la taille du viewport (écran).
Je n'ai pas de vidéo sous la main pour faire un test sur un smartphone. Je vois plus quelque chose comme :

[== CSS ==]
.video.mobile.fullscreen {
  position : fixed;
  top: 0;
  left: 0;
   width: 100vw;
  height: 100vh;
}

Les unités vw et vh représentent des % de la taille de l'écran (w largeur, h hauteur)
En savoir plus sur les unités de mesure

Il suffit juste de jouer avec la fonction classList.toggle('fullscreen') en javascript pour basculer en plein écran

Dernière modification par bazooka07 (20/01/2018 17:56:56)

Hors ligne

#4 20/01/2018 18:28:03

Carambozilla
Membre
Inscription : 27/12/2017
Messages : 19

Re : Rendre responsive les vidéos embarquées

Merci pour ces tuyaux.
@Dudy Je n'avais pas de problèmes avec le iframe mais sur mobile la vidéo n'était pas responsive (je n'ai pas trouvé la classe frame dans les CSS)
@bazooka07 je ne suis pas assez balèze pour "jouer avec la fonction classList.toggle('fullscreen')" wink
Bon ça fonctionne pour moi comme ça en tout cas. smile
J'apprends, j'apprends…

Hors ligne

#5 20/01/2018 18:37:23

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 342

Re : Rendre responsive les vidéos embarquées

@Carambozilla
dossier themes/css/plucss.css ligne 654

[== Indéfini ==]
.frame {
	height: 0;
	padding-top: 56.25%;
	position: relative;
}
.frame embed,
.frame iframe,
.frame object,
.frame video {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

ce le code responsive smile j'avais bien compri

Dernière modification par Dudy (20/01/2018 18:38:25)

Hors ligne

#6 20/01/2018 18:46:49

Carambozilla
Membre
Inscription : 27/12/2017
Messages : 19

Re : Rendre responsive les vidéos embarquées

J'ai trouvé !
Merci beaucoup smile

Hors ligne

#7 20/01/2018 18:48:27

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 342

Re : Rendre responsive les vidéos embarquées

parfait
regarde aussi dans le fichier sidebar.php il y à le code dejà tout pret wink

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés