Contrôler la taille des vidéos sur le fil d'activité

Ce sujet a 14 réponses, 3 participants et a été mis à jour par Avatar de imath imath, Il y a 10 mois.

15 sujets de 1 à 15 (sur un total de 15)
  • Auteur
    Articles
  • #4793
    Avatar de Dan
    Dan
    Administrateur

    En réponse à la note publiée par @noeline
    Je cherche une manière de modifier la taille des videos youtube dans le fil d activité de buddypress
    Je ne trouve pas le fichier css qui me permettrai cela.

    //////////////////////////////////////////////////////////////////////
    Le fil d’activité est ajaxifié (En afficher davantage…. qui dépend de la pagination ajax) et ne permet pas d’être modifié « simplement » avec un coup de CSS. Si l’insertion de videos (lecture recommandée) est aujourd’hui facile, il n’en demeure pas moins que l’opération qui se déroule en coulisse est assez complexe.
    BuddyPress ne gère pas les médias, quand bien même les membres peuvent coller une URL dans une note ou un post ou un topic sans autre formalité. C’est du ressort de WordPress. Pour les vidéos, seuls une vingtaine de fournisseurs sont agréés et bien entendu, chacun d’eux a ses propres paramètres de tailles.
    L’affaire se complique dès la publication, la vidéo dans BuddyPress est en effet dans une iframe. Élément qui est par ailleurs déconseillé par les gourous du CSS wordpressien. Mais c’est l’exception qui confirme la règle !
    Donc, on y arrive, pas besoin de tweaker les CSS, un petit bout de code dans le functions.php du thème et hop, on peut s’amuser à modifier la largeur maximum d’une vidéo. WP se chargeant de faire recalculer proportionnellement la hauteur par le navigateur.

    A adapter en fonction de l’espace disponible sur le thème et en tenant compte de la taille originale de la vidéo, sachant qu’une réduction sera toujours plus propre qu’un agrandissement. Testé sur WP 3.7 et BP 1.8.1

    /* embeded videos size on BP activity feed */
    if ( ! isset( $content_width ) ) $content_width = 300;

    Il y a pas mal d’infos et de solutions sur le sujet sur le Net, mais la plupart concernent BP 1.5+/WP 3.0 et surtout la majorité date des débuts de cette évolution technique et sont aujourd’hui obsolètes ou inefficientes.

    #4794
    Avatar de Noeline
    Noeline
    Participant

    En effet, j aurais pue chercher tres longtemps le fichier css.
    Merci beaucoup pour cette explication bien détaillé ;)
    Par contre j’ai tout de même une autre question
    Serait il possible de mettre la dimension en %, c est a dire 100%, mon theme étant responsive, cela serai plus pratique pour moi
    J ai essayé de mettre % mais sa me fait une erreur :(

    #4795
    Avatar de Noeline
    Noeline
    Participant

    Pour expliquer un peu plus mon probleme, voici donc un exemple, je post un lien soundcloud, le lecteur apparait mais la ya bug, comme l on peu le constater sur mon site, le lecteur soundcloud n est pas responsive, il reste bloqué a 950px alors que tous les widget de soundcloud sont a 100% par default
    Comment pui-je modifier tout sa ?

    http://www.electrovib.com/reseau-social

    #4796
    Avatar de Dan
    Dan
    Administrateur

    Il n’y a pas à mettre 100%, puisque c’est la dimension par défaut. En effet, c’est le fournisseur de la vidéo qui détermine la dimension de la vidéo. Que celle soit en 450px ou en 600px de large par exemple, représentera donc la dimension maximale de la vidéo, autrement dit 100%.
    Le code que je t’ai indiqué permet soit de réduire soit d’agrandir, en pixels les dimensions par défauts.

    Pour ta question à propos de soundcloud, je n’ai pas de réponse et de plus ce n’est pas un problème lié à buddypress. L’aspect responsive non plus. Tout ce que je peux te dire c’est qu’il va falloir chercher de l’aide chez soundcloud.

    Tu pourrais aussi essayer ces plugins et ce n’est pas le choix qui manque…

    http://wordpress.org/plugins/responsive-video-embeds/

    http://wordpress.org/plugins/soundcloud-shortcode/

    http://wordpress.org/support/plugin/soundcloud-is-gold/

    http://wordpress.org/plugins/soundcloud-ultimate/

    http://wordpress.org/plugins/soundcloud-sound-competition/

    http://wordpress.org/plugins/soundcloud-master/

    http://wordpress.org/plugins/html5-soundcloud-player-with-playlist/

    Voilà de quoi passer un bon week-end ! ;-)

    #4797
    Avatar de Noeline
    Noeline
    Participant

    Merci pour ces filons de plugin, j ai deja testé tous ces plugins ce matin avec en plus Rmedia qui est le seul qui a pu changer la taille des video youtube mais pas pour soundcloud
    Tous les plugins ci dessous n on pas pu changer la taille du lecteur soundcloud dans le fil d actualité.
    Au paravent ( il y a 2 ans environ), soundcloud is gold interférai bien sur le fil d actualité de buddypress, mais plus maintenant
    Bref, c est quand meme dommage de ne pas pouvoir partager un lecteur soundcloud en entier car du coup, les fonctions du lecteur n apparaissent pas
    Si tu a une astuce un de ces 4, je serai preneuse
    Merci a toi pour tes conseil, bon week end

    #4798
    Avatar de Noeline
    Noeline
    Participant

    Si je peu me permettre, tu me dit que ce n est pas buddypress qui gere cela, alors fait un petit test en suppriment le fichier buddypress.css (content/plugins/buddypress/bp-templates/bp-legacy/css) et regarde ce qu il ce passe.
    Quand ce fichier css est désactivé, le lecteur soundcloud apparait en entier sans bug. Cela veu bien dire qu il y a quelque part une fonction qui gere sa non ?

    #4799
    Avatar de Noeline
    Noeline
    Participant

    Bon, apres avoir passé un peu de temps sur buddypress.css, voila ce que j ai pu trouvé
    Si je suprime ces lignes, le le lecteur fonctionne tres bien, donc c est dans ces lignes, lequelles, je sais pas
    Je te laisse regarder si tu trouve une solution, une chose est sur, c est ici que sa ce passe, la preuve sur mon reseau
    #buddypress .activity-list .activity-content {
    margin: 0 0 0 70px;
    }
    body.activity-permalink #buddypress .activity-list li .activity-content {
    border: none;
    font-size: 100%;
    line-height: 150%;
    margin-left: 170px;
    margin-right: 0;
    padding: 0;
    }
    body.activity-permalink #buddypress .activity-list li .activity-header > p {
    margin: 0;
    padding: 5px 0 0 0;
    }
    #buddypress .activity-list .activity-content .activity-header,
    #buddypress .activity-list .activity-content .comment-header {
    color: #888;
    line-height: 220%;
    }
    #buddypress .activity-header {
    margin-right: 20px;
    }
    #buddypress .activity-header a,
    #buddypress .comment-meta a,
    #buddypress .acomment-meta a {
    text-decoration: none;
    }
    #buddypress .activity-list .activity-content .activity-header img.avatar {
    float: none !important;
    margin: 0 5px -8px 0 !important;
    }
    #buddypress a.bp-secondary-action,
    #buddypress span.highlight {
    font-size: 80%;
    padding: 0;
    margin-right: 5px;
    text-decoration: none;
    }
    #buddypress .activity-list .activity-content .activity-inner,
    #buddypress .activity-list .activity-content blockquote {
    margin: 10px 10px 5px 0;
    overflow: hidden;
    }

    #4800
    Avatar de Dan
    Dan
    Administrateur

    Permets-toi, permets-toi ! ;-)
    Tu as raison sans avoir raison. En fait BP ne le gère pas, mais pour des raisons de rétro compatibilité avec certains thèmes/plugins, BP fait le gentil et transmet l’héritage de ce fichier CSS.
    Tu l’as désactivé et soundcloud s’affiche correctement ! Donc tu as trouvé l’origine de ton bug. Si rien d’autre ne perturbe ton site, tu laisses ce fichier de côté. D’autant que tu utilises un thème tiers, donc ton BP ne dépend théoriquement pas de ce fichier legacy.
    Quant aux astuces, as-tu été voir sur l’aide de soundcloud ?

    #4801
    Avatar de Dan
    Dan
    Administrateur

    A priori je vois overflow: hidden;
    Commente la ligne et vois ce qui se passe.

    #4802
    Avatar de Noeline
    Noeline
    Participant

    Le truc c est que si je supprime ces lignes, le lecteur apparait bien en entier mais reste fixe quand même si je diminue la taille de la fenêtre, donc pas responsive
    J ai testé toutes les fonction sur l overflow
    - visible,
    - hidden,
    - scroll,
    - auto,
    - inherit,
    Mais le lecteur dépasse malheureusement
    Comme dit mon pere, c est le mister de la quequette sans trou ^^

    #4805
    Avatar de Dan
    Dan
    Administrateur

    Sans aucun plugin, ni modif, juste en collant le widget link du morceau trouvé sur le cloud et ça s’affiche dans bbPress.. Iframe width à 60% au lieu de 100 par défaut et hauteur 250

    Pour que cela s’affiche dans l’activité du site, et que tu puisses aussi publier un tel lien directement sur l’activité, il faut ajouter différentes balises à celles normalement autorisées par BP.

    La boite de saisie sur l’activité sert à envoyer des messages aux membres du site, ou à son groupe ou juste sur son activité. Ce n’est pas un article de blog et pas non plus une question qui appelle des réponses comme sur un forum. C’est un bête mur, et par conséquent, c’est censé être court et pas chargé en truc et en machins. Et aussi la raison pour laquelle les devs ont réduit au maximum le html dans la saisie, pour éviter les abus et, entre autres, des injections malveillantes. Dans le cas présent, n’importe qui pourra venir te coller une iframe avec n’importe quoi à l’intérieur. C’est chaud !

    Je te rassure, WP et bbPress procèdent au même type de contrôle, mais pas avec la même sévérité semble t’il. Comment tout cela fonctionne est largement expliqué sur ce tuto.

    Maintenant que te voilà prévenu, voici le code à ajouter au functions.php du (child)thème. Grâce à cela tu pourras copier/coller le lien soundcloud nommé « widget code » (le iframe) directement dans la messagerie de l’activité ou sur un forum ou dans un article de blog d’un site sous buddypress. Et le résultat apparaîtra. Et comme le iframe contient les paramètres de dimensions, tu pourras les changer comme bon te semble. Mais le problème c’est ton thème ou la manière dont tu t’en sers. Tu ne devrais pas avoir à utiliser bp-legacy et éviter ce genre de hack qui met en péril ton site.
    Je t’envoie le code en MP.

    #4810
    Avatar de Noeline
    Noeline
    Participant

    Joli travail de recherche, mais comme tu dit, c est un peu chaud comme system a cause des iframes, je vais regarder tout sa de plus pres
    Apres, je sais aussi que soundcloud a un player en version flash, peu etre que il faudrait remplacer le lecteur en iframe par le celui en flash …
    En tous cas, merci beaucoup d avoir pris le temps de trouver une solution

    #4823
    Avatar de Noeline
    Noeline
    Participant

    Salut, c est encore moi ^^
    Bon, pour aller plus loin dans mes recherches et que bien évidement par ce que je n est pas vraiment envie d autoriser les iframe sur mon site, je suis allée demander a soundcloud pour cette histoire de taille des lecteurs
    Soundcloud ma donc répondu que leurs lecteurs était totalement responsive jusqu a la plus petite taille et que la taille du lecteur soundcloud sur les autres sites ( comme wordpress et buddypress, facebook, twetter par exemple etc… ) dépendaient uniquement du réglage des api sur leurs propre site web.
    Bref, je ne met pas en doute ta parole mais ya bien un moment ou il faut savoir d ou viens le problème non ???
    Ce que je ne comprend pas, c est que mes lecteurs soundcloud sur mon site wordpress sont totalement responsive alors que sur buddypress non et cela quelqu en soit le theme utilisé. Cela est identique pour les vidéos youtube ou vimeo et blabla
    A savoir que le theme que j utilise est totalement optimisé aussi pour les telephone mobil et la aussi les video et lecteurs soundcloud sont adapté automatiquement, pourquoi pas sur buddypress ?

    La grande question est donc… Pourquoi les lecteur soundcloud ainsi que les vidéos ne sont t elle pas responsive uniquement sur buddypress ?
    Et la deuxième petite question, en temps qu utilisateur de wordpress et buddypress, ou pouvons nous modifier cela alors que tu est surement le seul a pouvoir régler ce souci d API, du moin, tu te débrouille bien… a moins que je ne me trompe et alors, pourrais tu m indiquer le ou les fichiers que je pourrais modifier ?
    J insiste beaucoup sur ce sujet car c est ce qui va faire ou pas que j utilise buddypress et parce que je pense que c est un sujet importent pour beaucoup de wordpressien.
    Beaucoup d entre nous parteons beaucoup de media que ce soit des images, videos, musiques etc sur les reseaux sociaux.
    Je pense donc que cette option est tres importante dans ce formidable réseau que tu nous offre

    #4826
    Avatar de Dan
    Dan
    Administrateur

    Bon bin je croyais avoir été clair sur le sujet et dans mon MP.

    Pemièrement le thème par défaut de BuddyPress (bp-default) n’est pas responsive. Mais si tu utilises un thème responsive, BP le sera car il sait s’adapter au sens ou il n’a pas besoin d’un thème en particulier pour fonctionner. Notre thème sur bp-fr est responsive. Et le cloud plus haut l’est probablement aussi.

    Deuxièmement, ton thème. Il a beau être responsive et tout et tout, je suis quasi certain que tu as mal fait quelque chose à un moment ou que tu n’as pas paramétré quelque chose. PBCK first… ;-)

    Je récapitule donc le problème.

    Tu publies un soundcloud sur buddypress par l’intermédiaire de la boite de saisie des activités (du site, du groupe, d’un profil, peu importe) et au mieux tu n’as rien ou un affichage dégueu.Tu viens en parler ici et je teste.

    Je publie un soudcloud dans un article WP, c’est nickel chrome
    Je publie un soundcloud dans un sujet sur bbPress, c’est nickel aussi.

    Le seul endroit où rien ne se passe comme il faut est la messagerie.

    La boîte de saisie « quoi de neuf? » ou « what’s new? » de buddypress est bridée et n’accepte pas de code html autre que la balise a que BP transforme illico en lien. Donc quand tu balances là-dedans du code soundcloud (que ce soit celui d’un cloud en flash ou en html5), tout est viré et évidemment rien ne s’affiche.

    Le code que je t’ai envoyé te permet de t’affranchir de cette restriction. Et tu peux le croire ou pas, mais il fonctionne très bien ici sur bp-fr et son thème bootstrapé, comme sur mes sites de tests avec bp-default et quelques autres thèmes sans importances ici. Le code dont je parle ici n’est pas public et encore moins en service sur ce site.

    Voyons à présent du côté de soundcloud. Tout d’abord il y a leur code pour partager un cloud sur son site ou ailleurs. L’un utilise un shorcode et est spécialement destiné aux utilisateurs de WordPress équipé du plugin qui permet d’insérer un cloud à leur site. Mais BP n’utilise pas d’articles et du coup le fameux plugin WP ne sert à rien, et par conséquent, le lien shortcodé du soundcloud non plus. A ce propos, tu n’as jamais dit quel code tu utilisais pour ton soundcloud, ni où tu le prenais (bouton share, url, widget, ou autre).

    Reste l’iframe avec un lecteur flash et qui contient à présent (depuis très peu de temps),un lecteur html5 pas encore au top de sa forme. Certains navigateurs restent en effet encore insensibles à son charme. Bref, les iframe ça va bien dans WP (à petite dose) et pas du tout dans BP qui ne laisse pas passer cette balise.

    Quant à publier sur le forum, nul besoin d’y coller une iframe, l’url du cloud suffit (procédure identique à un insert youtube par exemple).

    Comme tu poses beaucoup de questions, je vais t’en poser une à mon tour en te demandant si tu as essayé mon code ? Et si oui, quel en fut le résultat ?

    #4867
    Avatar de imath
    imath
    Modérateur

    Bonsoir c’est pas trop mon rayon… mais si ça peut aider, j’ai testé sur le thème twentythirteen en copiant l’url http://soundcloud.com/beat-rider/surprise-sur-prise-encore-the dans le champ pour poster une nouvelle activité et le lecteur s’affiche bien et s’adapte bien si je redimensionne mon navigateur (responsive). Donc j’imagine que le problème vient du thème et qu’un benchmarck sur twentythirteen serait intéressant pour résoudre la difficulté.

    A+

15 sujets de 1 à 15 (sur un total de 15)

Le sujet ‘Contrôler la taille des vidéos sur le fil d'activité’ est fermé à de nouvelles réponses.