Intégrer une vidéo Youte de façon customisée

Bonjour,

je cherche des conseils pour intégrer une vidéo Youtube sans afficher tous les widgets qui s'affichent avec la preview.

Je voudrais afficher juste une image et un bouton (sans autre distraction) et lorsqu'on clique sur le bouton, la vidéo youtube se lance, mais avant de lancer la vidéo on a une interface plus clean...

Je cherche des idées pour réaliser ceci, je n'ai pas trouvé un exemple de code pour l'instant..

merci
-

Bonjour,

J'utilise souvent le fait que pour chaque vidéo youtube, il y a sur les serveurs de youtube plusieurs images tirées de la vidéo.

Par exemple, pour la vidéo https://www.youtube.com/watch?v=uFglr3HCMmY, il y a l'image https://i.ytimg.com/vi/uFglr3HCMmY/mqdefault.jpg (il y en a d'autres de différentes tailles : tu peux éventuellement aller fouiner dans le code js des pages de youtube, c'est comme ça que j'ai fait pour trouver les url). L'url est ici de la forme https://i.ytimg.com/vi/ + id youtube de la vidéo + /mqdefault.jpg et ça marche pour toutes les vidéos.

Ça permet d'y mettre ce que tu veux dessus ensuite. Ça a aussi l'avantage de ne charger qu'une balise <img> et non une balise <video> dans ta page tant que l'utilisateur n'a pas décidé de la démarrer. Par contre, il faudra ensuite faire un bout de js pour lancer effectivement la vidéo, ou faire un lien vers une autre page affichant la vidéo.

Il y a d'autres manières de faire. On peut par exemple se référer à https://developers.google.com/youtube/iframe_api_reference?hl=fr#seekTo

Amicalement,

@parsimonhi

Merci à toi, je vais explorer cette piste

Bravo messieurs, il est super intéressant votre sujet. Autant pour la question que pour la réponse de Parsimonhi. Je vais moi aussi explorer cette piste prochainement.

Olivier C a écrit :
Bravo messieurs, il est super intéressant votre sujet. Autant pour la question que pour la réponse de Parsimonhi. Je vais moi aussi explorer cette piste prochainement.

Ah, super, Olivier, pour ton implication

J'ai pas encore eu le temps de me replonger dans le sujet, mais le premier qui trouve une solution revient la donner

Bon j'étais partit pour faire du SQL ce soir, mais on verra en fin de soirée...

Oui, parce qu'effectivement je suis intéressé : je voudrais mettre dans mon projet une série de shortcodes, un peu comme ce que j'avais mis en place sous WordPress à l'époque (là je suis sous Node.js avec Express). Donc un système disons... de type {{mustache}} par exemple (aller, je pars là-dessus pour l'instant) qui me modifierait le code à la volée pour le transformer en autre chose : une image, une map Leaflet ou - justement - une vidéo.

Du coup je viens de coder un truc là, tout de suite : CodePen.

Pour l'instant je ne suis pas encore dans ton sujet, mais c'est maintenant que ça vient. En effet, l'idée d'optimiser le truc afin d'éviter que la vidéo soit chargée inutilement, ça me plait bien. Je vais essayer de voir comment je peux aborder le problème selon l'angle d'attaque de Parsimonhi.

Je viens de trouver l'image en qualité maximale sous cette forme : https://img.youtube.com/vi/{idDeLaVideo}/maxresdefault.jpg

Voir cette ressource (en) : comment obtenir l'image miniature d'une vidéo youtube en haute qualité
Modifié par Olivier C (26 Feb 2022 - 20:13)

Alors : je suis arrivé à quelque chose, mais je rencontre un problème et ne sais comment le résoudre : les vidéos semblent se charger au clic mais ne se lancent pas :
custom template engine v2

Alors que dans la version simple "shortcode" je n'avais pas ce problème :
custom template engine v1

J'ai atteins mon plafond de verre...

De plus, cette solution ne gère pas les images manquantes que YouTube remplace par une image affreuse.
Modifié par Olivier C (26 Feb 2022 - 23:06)

Bonjour,

Dans https://codepen.io/olivier-c/pen/LYOJMGQ ta toute dernière regex (celle qui produit l'iframe) n'a pas l'air de faire ce que tu souhaites (on ne sait pas trop ce que tu captures entre les parenthèses).

Un truc du genre ci-dessous me semble mieux fonctionner :

e.innerHTML = e.innerHTML.replace(/^.*\/vi\/(.*)\/.*$/, '<iframe src="//www.youtube.com/embed/$1" allowfullscreen=""></iframe')

Amicalement,
Modifié par parsimonhi (27 Feb 2022 - 05:09)

Et oui bien sûr ! tu as complètement raison, j'étais au fraise sur la regex ! Mais comme j'avais obtenu quelque chose quand même je n'arrivais pas à comprendre.

Super en tout cas parce que du coup ça fonctionne : custom template engine v2.

Il resterait quand même un traitement à faire en cas d'image non trouvée.

En attendant je ne comprends pas ta regex. Serait-il possible que tu me l'explique ? Notamment le "vi" au milieu :

/^.*\/vi\/(.*)\/.*$/

Edit : finalement j'ai fini par comprendre ta regex, il y avait une petite erreur que j'ai corrigé comme j'ai pu :

^.*\/vi\/(.{11}).*$

Ce n'est pas très souple ma solution car elle suppose que les vidéos YouTube auront toujours un ID à 11 chiffres. Je ne comprend pas pourquoi ta regex ne fonctionne pas car elle me semble correcte (elle ne choppe pas le "/" après l'ID comme cela devrait, et du coup elle prenait un guillemet simple et une parenthèse en plus de l'ID. Ça n'empêche pas le chargement de la vidéo mais ça empêche le full screen.

Edit : J'ai trouvé, voir plus bas, solution mise à jour :

/^.*\/vi\/([0-9A-Za-z]*)\/.*$/

Modifié par Olivier C (28 Feb 2022 - 18:19)

J'ai mis le code en place sous Express, ça marche nickel pour mon site. Donc traitement du thumbnail YouTube côté serveur :

const shortcodes = (data) => {
  data = data.replace(
    /{{https:\/\/www.youtube.com\/watch\?v=(.*?)}}/g,
    '<div class="video video-click"><div class="thumbnail-youtube" style="background-image: url(\'https://img.youtube.com/vi/$1/maxresdefault.jpg\')"></div></div>'
    )
  return data
}
  
module.exports = { shortcodes }

...puis traitement côté front si clic comme dans la démo.

Il y a deux raisons pour lesquelles j'ai utilisé des regex plutôt que des méthodes de manipulation du DOM :
1. je voulais un traitement des données côté serveur à partir des données de la base, et il n'y a donc pas encore de DOM à ce niveau, qu'une chaine de caractères.
2. avec le deuxième paramètre de la regex on voit tout de suite ce que peut donner le rendu attendu, surtout avec des API externes dont les paramêtres/urls peuvent évoluer au cours du temps.

Bonus : avec une url sous cette forme vous pouvez récupérer un .json avec des infos intéressantes sur la vidéo :

https://youtube.com/oembed?url=http://www.youtube.com/watch?v=3Bs4LOtIuxg&format=json

Interessant pour récupérer le titre notamment :

{
  "title": "Wire Cutters [Animated Short] by Jack Anderson",
  "author_name": "Jack Anderson",
  "author_url": "https://www.youtube.com/c/jacksflicks",
  "type": "video",
  "height": 113,
  "width": 200,
  "version": "1.0",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_width": 480,
  "thumbnail_url": "https://i.ytimg.com/vi/3Bs4LOtIuxg/hqdefault.jpg",
  "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/3Bs4LOtIuxg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
}

Et du coup on a aussi l'iframe ! C'est peut-être la meilleure voie à exploiter si l'on n'utilise pas l'API YouTube.

Bonjour,

Olivier C a écrit :
Bonus : avec une url sous cette forme vous pouvez récupérer un .json avec des infos intéressantes sur la vidéo :

https://youtube.com/oembed?url=http://www.youtube.com/watch?v=3Bs4LOtIuxg&format=json

Effectivement, c'est un très bon bonus !

Amicalement,

Et tu as compris pourquoi elle ne marchait pas ta regex (voir mon message plus haut te concernant) ?
Parce que moi je n'ai pas compris, à priori elle était bonne de mon point de vue.

Edit : j'ai trouvé, pourquoi, ta regex prenait le slach comme un caractère quelquonque et ne résolvait donc jamais la fin de sa définition.

Ma solution plus haut mise à jour :

/^.*\/vi\/([0-9A-Za-z]*)\/.*$/

Ou, un peu moins précis à cause de la possibilité d'un underscore :

/^.*\/vi\/([\w]*)\/.*$/

Modifié par Olivier C (28 Feb 2022 - 21:44)

Bonjour,

Olivier C a écrit :
Et tu as compris pourquoi elle ne marchait pas ta regex (voir mon message plus haut te concernant) ?

Elle fonctionnait (et fonctionne toujours d'ailleurs) sur ton exemple codepen https://codepen.io/olivier-c/pen/LYOJMGQ

Une erreur de copier-coller ?

Amicalement,
Modifié par parsimonhi (28 Feb 2022 - 20:20)

Elle fonctionnait, oui, "malgré" le fait qu'elle rajoutait une chaîne de 2 caractères à la fin de l'URL, car elle oubliait de capturer un slach, d'où un petit correctif de ma part. Parce que ça "passait" pour l'affichage de la vidéo mais impossible de passer en mode plein écran, même avec un allofullscreen bien placé. C'est comme celà que je m'en suis rendu compte.

Le CodePen je l'avais déjà réédité.
Modifié par Olivier C (28 Feb 2022 - 20:50)

Bonjour,

Ok, bien vu.

Oui, j'ai vu que tu as ré-édité le CodePen, mais j'avais re-testé avant de poster aujourd'hui.

Je n'avais pas vérifié que ça capturait trop.

Dans un tel cas, la technique habituelle est de mettre entre crochet un ^ suivi du caractère qui se trouve après la fin de la chaine que tu veux capturer et qui est ici un /.

Ça donne :

/^.*\/vi\/([^/]*)\/.*$/

Amicalement,

Ça marche. Merci pour les orientations en tout cas, j'ai toujours un peu de mal avec les regex.