Rendre responsive les vidéos embarquées

Carambozilla

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 url]http://www.studiovitamine.com/blog/comment-rendre-une-video-responsive/[/url
et qui fonctionne très bien.

J'utilise le thème PluxMag url]http://forum.pluxml.org/viewtopic.php?id=5168[/url
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 url]https://www.pascale-varenne.fr/blog/editorial/un-jour-avec-ludovic-geheniaux-coiffeur-coloriste[/url

Dudy

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

bazooka07

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

Carambozilla

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')"
Bon ça fonctionne pour moi comme ça en tout cas.
J'apprends, j'apprends…

Dudy

@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 j'avais bien compri

Carambozilla

J'ai trouvé !
Merci beaucoup

Dudy

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