Accueil > SPIP > Afficher une vidéo Youtu.be dans une mediabox

IRC est une mine, vous l’ai-je déjà dit ?

Afficher une vidéo Youtu.be dans une mediabox

lundi 22 avril 2013, par François Rygaert (aka Suske)

IRC, 19/4/2013

[12:40] Ernest : Est-ce que l’un de vous a deja tente ( et reussi ) d’afficher une video youtube dans avec le plugin mediabox ?
[12:47] Célestine : oui Ernest
[12:48] Ernest : pas moyen d’afficher une video youtube comme splash, ou je me trompe ?
[12:49] Célestine : j’utilise oembed pour le document youtube
[12:49] Célestine : et <a href="[(#URL_DOCUMENT)]" class="mediabox BoxIframe boxWidth-600px boxHeight-450px" title="<:voir_video_presentation:>">#LOGO_DOCUMENT</a>
[12:50] Célestine : ça fonctionne bien

Démonstration

Cliquer sur la vignette...

<youtube529>

Ou sur celle-ci.

<youtube533>

En pratique... [1]

– Créer un modèle squelettes/modeles/youtube.html contenant le code :

– Installer le plugin oEmbed
– Dans l’encart d’ajout de documents, sélectionner depuis "internet" et coller l’url de la vidéo


– Dans le texte de l’article, il vous reste à indiquer <youtube529> (en adaptant le numéro du document bien entendu).

Voilà, voilà ;-)

HS, ceci est une formule de sucre complexe : <non_carb>-(1-4)-α-D-6-deoxy-Glcp4N-(1-4)-D-1-deoxy-Glcp

[1] Mise à jour du 6/1/2014

Messages

  • Effectivement, le code fonctionne très bien (merci) mais la video ne se lit pas sur ipad... Il faut ouvrir la video sur un nouvel onglet pour que cette dernière soit lue... Aurais-tu la solution ?
    Marc

    • Salut,

      Pas d’idée spécifique pour l’Ipad. Par contre je réalise ce jour que j’ai le même phénomène avec Firefox quand je suis connecté... Un conflit js probablement dans mon cas. Si je trouve lequel je reviendrai. Mais donc : as-tu utilisé l’Ipad en étant connecté au site ?

  • Bonjour,

    Voilà trois jours que je m’arrache les cheveux sur la question d’afficher les vidéos youtube, vimeo, etc. dans la mediabox, et je dois finaliser une proposition qui réponde à ce critère… ce soir !
    Après avoir essayé plusieurs plugins comme video(s) ou autres, sans succès, voilà oembed qui semble répondre à mes attentes.
    Seulement voilà, je connais spip mais n’ai pas un niveau avancé, et je ne trouve pas où intégrer le fameux code ci-dessus et qui permet de mettre la class .mediabox sur le lien qui appelle le document.

    Dans une boucle de l’article ? Dans les modèles du plugin oembed, dans les modèles du plugin-dist medias ?
    Help please : dans quel fichier exactement ?
    J’ai beau parcourir le web, je ne trouve pas de réponse, et je n’en peux plus :-( !!

    D’avance merci,
    bien cordialement,

    Karen

  • Bonjour Karen,

    J’ai mis l’article à jour avec un intertitre "En pratique". Désolé mais votre délai était trop court pour que je puisse le respecter...

    Meilleurs voeux pour 2014,

    Suske

  • Bonjour François,

    Désolée, je reviens bien tard pour vous remercier, je découvre votre réponse aujourd’hui seulement… et ça fonctionne !!
    Mille mercis, et c’est vrai que j’étais un peu (beaucoup) honteuse de mon délai de réponse. Ce week-end là, j’avais besoin de savoir si je pouvais répondre à la demande du client (beaucoup de vidéos, et demande de modalbox lisible sur smartphone…) avec Spip avant de lui faire une proposition… toujours la trouille de ne pas être cap’, ou de ne pas trouver la solution, je ne suis qu’une webdesigneuse :p

    En attendant la réponse et à force de bidouiller, j’avais trouvé (je croyais) une solution en modifiant le modèle doc.html, et j’avais signé avec le client…
    Le problème est que cette solution modifie tous les appels des autres documents, tels que les pdf que la mediabox ne peut pas lire… et que je ne veux de toute façon pas afficher dans la mediabox !

    Je viens de découvrir ce problème ce matin seulement, maintenant que je démarre la production, et je découvre votre réponse en même temps. Ça me sauve la vie ! En tout cas ça m’épargne de nombreux jours de déprime et de stress ;-)
    Et je suis étonnée que si peu de plugins vidéo gèrent ça de façon plus simple et automatique, même si j’ai conscience que tout se fait avec de très généreuses contributions bénévoles.

    De plus, votre réponse me permet d’avancer dans ma compréhension générale de Spip !

    Encore merci, et au passage, Jungle Book, VO, très bon exemple pour le tuto, quel grand film !
    Bien cordialement,
    Karen

  • Et meilleurs voeux pour 2014 également !!

  • Salut !
    Je reviens sur notre fil de discussion de l’année dernière. En fait, j’ai repris mes éléments et ai tout changé ! Et ai constaté qu’on se prenait la tête !!! : appeler une video avec mediabox est beaucoup plus simple (maintenant ?).
    – installez les plugins Mediabox et oEmbed.
    – de l’article, créer un nouveau document internet HTML, de youtube par exemple.
    – de l’article, mettre la balise doc630 ou <lien|doc630>
    – et voilà !
    – bien sûr, il faut avoir créer dans le HEAD, un code JS qui appelle la mediabox :
    $(".spip_in[href^=’IMG/distant/html/’]").mediabox(
    transition :"elastic",
    opacity :"0.75",
    innerHeight :"auto",
    innerWidth :"auto",
    slideshow:true,
    preloading:true
    ) ;
    – la class "spin_in" peut vous prendre la tête : il faut bien distinguer les class ".spin_in" dans le JS.
    – et voilà pour de bon !

  • Bonjour et merci pour cette méthode,

    Mais j’ai un bug sous firefox (mac) sous SPIP 3.0.21, et sous tout les navigateurs sous SPIP 3.1

    Tout marche bien, la fenètre s’ouvre, je souhait la mettre en plein écran => ok, mais quand je souhait revenir à la taille "mediabox" , que j’ai defini comme 500px de large. Ma fenetre vidéo se trouve en bas a droite de l’ecran, en partie hors écran (j’ai donc des scrolbars qui apparaissent).

    Mes vidéos sont hébérgés par Viméo.
    Sous Chrome et Safari, pas de souci, j’ai pas testé sur PC.

    Une idée du problème ? je peux pas mettre d’image ici pour mieux expliquer.

    Bonne journée

  • Un conflit avec un style de votre squelette ?

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexion | S’inscrire | mot de passe oublié ?