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 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

Réponses

  • DudyDudy Member
    janvier 2018 modifié
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    janvier 2018 modifié
    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
  • 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…
  • DudyDudy Member
    janvier 2018 modifié
    @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
  • J'ai trouvé !
    Merci beaucoup :)
  • parfait
    regarde aussi dans le fichier sidebar.php il y à le code dejà tout pret ;)
Connectez-vous ou Inscrivez-vous pour répondre.