Parametres / attributs vidéo youtube dans une popup - attributs href

Bonjour,

est-il possible, dans une popup, d’insérer du code pour intégrer une vidéo youtube MAIS en y intégrant des paramètres / attributs ?

En effet, en utilisant par exemple le code :

{{{YouTube}}},

cela fonctionne, mais alors le bouton « voir en plein écran » de youtube est désactivé.

Je souhaiterai intégrer dans la popup des attributs du style :

"title=« YouTube video player » frameborder=« 0 » allow=« accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share » allowfullscreen

bref, comme dans une vraie iframe youtube ! MAis je ne sais pas comment faire !

Question connexe : quand on insère dans une popup un lien href, est-il possible d’intégrer des attributs du style « target= »_self" ? Si oui, comment faire ?

Un grand merci d’avance à ceux qui pourraient m’éclairer !

Ça ne marche pas mieux avec Peertube ?

Je ne sais pas, mais je n’ai pas le choix : les vidéos de ma collectivité sont sur youtube et vont y rester :grimacing:

Le problème c’est qu’il n’y a aucune garantie à moyen ou long terme que les embed youtube continuent à fonctionner car YT peut changer ses règles ou modalités à n’importe quel moment vu que rien n’est contractualisé avec eux.

Bref, ce qui fonctionne aujourd’hui sur umap avec YT (ou qui a fonctionné) peut ne plus fonctionner à tout moment du fait de YT.

C’est ça le message à faire passer à la collectivité pour qu’elle revoit éventuellement son « choix » et rien n’empêche d’avoir une copie de ces vidéos ailleurs, avec un accès plus pérenne.

1 Like

Merci beaucoup de ta réponse, dont je suis bien persuadé du bien fondé.

Je n’ai donc aucune solution… ma collectivité est une trés grande région de 8000 agents, et en aucun cas elle ne changera sa politique d’utilisation des plate-formes, sans compter que les vidéos à diffuser sur une carto existent depuis très longtemps, que la chaîne est bien identifiée (même si ce sont des contenus « de niche » ne drainant pas bcp de monde). Bref…c’est la mierda ! je bricolerai des carto en images mappées avec popup entièrement HTML sur laquelle j’ai la main…

A moins que (et c’était la 2ème partie de ma question) : on ne peut même pas mettre un target=_self dans un lien href dans une popup ??? Ca, ça n’a rien a voir avec les conditions d’un géant comme youtube, juste avec du code HTML valide et conforme W3C !!

Cela me sauverait la mise au moins dans un 1er temps, là je ne trouve pas comment mettre un attribut target et de base, le lien s’ouvre dans un nouvel onglet (ce que je veux absolument éviter dans mon contexte)

A ma connaissance, ce qui peut être fait (rapport aux popups) sur la version logicielle en ligne est indiqué en cliquant sur le “?” qui est à côté de “description” dans la fenêtre d’édition, soit :

Mise en forme du texte

*simple astérisque pour italique*
**double astérisque pour gras**
# un dièse pour titre 1
## deux dièses pour titre 2
### trois dièses pour titre 3
Lien simple : [[https://exemple.fr]]
Lien avec texte : [[https://exemple.fr|texte du lien]]
Image : {{https://image.url.com}}
Image avec largeur (en pixels) : {{https://image.url.com|largeur}}
Iframe : {{{https://iframe.url.com}}}
Iframe avec hauteur (en pixels): {{{https://iframe.url.com|hauteur}}}
Iframe avec hauteur et largeur (en px) : {{{https://iframe.url.com|height*width}}}
--- pour un séparateur horizontal

Tu peux aussi faire un mélange de ça, par exemple :

pour faire une image en lien :
[[https://exemple.fr|{{https://image.url.com|largeur}}]]

Pour une iframe voulue « en lien » ça ne marchera pas.

C’est donc du code uMap :wink: et non du code html…

Mais comme uMap est opensource (et sous licence WTFPL), ben tu peux :

  • proposer du code pour contribuer à son amélioration en ce sens (ce qui servira à l’ensemble de ceux qui en aurait besoin comme toi).
  • créer ta version et y faire les modifications que tu voudras.

Pour moi, dans la plupart des cas, tous les liens qui renvoient vers l’extérieur pour faire visionner une vidéo en plein écran, c’est mieux (d’autant plus si la source est hébergée ailleurs que là où l’iframe est « postée »).

C’est pareil.

Up !

En fait si, sorry, c’est POSSIBLE !!!

Il suffit juste d’adapter le code fournit par youtube et de l’adapter à celui que fournit uMap (pour l’intégration d’une uMap) !
On le compare et la solution c’est de (bêtement) virer le https: fournit par le code youtube

Soit un truc du genre :

<iframe width="100%" height="300px" frameborder="0" allowfullscreen allow="geolocation" src="//www.youtube.com/embed/GfVpI8Sf-RQ?si=UECJYSFwBmsD1Ulr"></iframe><p><a href="//www.youtube.com/embed/GfVpI8Sf-RQ?si=UECJYSFwBmsD1Ulr">Voir en plein écran</a></p>

Tu peux vérifier que « ça fonctionne » ici :

Donc, pour Peertube, Dailymotion et autres, la solution sera la même :wink:

Note, il ne faut pas ajouter les 3 accolades (avant et après) {{{}}} sinon cela n’ira pas.
Et mieux vaut ne pas ajouter un lien « plein écran » pour n’utiliser que celui intégré dans la vidéo pour (en sortant du mode) revenir à l’uMap.


Pour préciser et comparer :
Le code fournit par défaut fournit par youtube (inadapté pour « passer » dans uMap tel que tu le veux est ainsi) :

<iframe width="560" height="315" src="https://www.youtube.com/embed/GfVpI8Sf-RQ?si=UECJYSFwBmsD1Ulr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

le code uMap par défaut (adapté pour être intégré) est ainsi :

<iframe width="100%" height="300px" frameborder="0" allowfullscreen allow="geolocation" src="//umap.openstreetmap.fr/fr/map/essai-integrations-dans-umap_103086?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true"></iframe><p><a href="//umap.openstreetmap.fr/fr/map/essai-integrations-dans-umap_103086?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false&captionMenus=true">Voir en plein écran</a></p>

Bonjour,

J’ai testé les propositions contenues dans ce fil mais sans succès. L’exemple ne semble pas fonctionner ?

Et dans Youtube je ne vois pas où trouver le lien

« …youtube.com/embed/… »

Hello.
Sur Youtube pour aller récupérer le code « embed » il faut d’abord cliquer là (en rouge) :

S’ouvre alors ça, ensuite il faut cliquer sur la zone en rouge pour aller récupérer le code d’intégration (embed) et pas sur le bouton copier à droite.

S’ouvre enfin ça "avec le code « embed » :

Là, tu peux utiliser le bouton « copier » à droite.
Tu le colles tel quel dans uMap, mais tu supprimes le https: autrement, le lecteur ne vas pas s’afficher dans uMap (ne me demande pas pourquoi !) (il faut bien virer aussi les deux points : qui sont après https)
Tu peux ainsi passer en plein écran Youtube depuis l’uMap et en sortir.

Tu peux aussi changer le paramètre du « width » pour le mettre à 100% pour qu’il s’adapte à la largeur maxi de la popup uMap (qui tend à évoluer au fil de ses mises à jour et changements de versions). Et mettre un « height » à 281 si tu veux à peux près visualiser un ratio de 16x9 pour une popup large.

Merci au vidéaste et aventurier « Youtubeur » Nico Mathieux qui me sert d’exemple pour ce « tutoriel » :smiley:

Pour peertube, dailymotion, viméo ou autre, le principe est le même.