Intégrer des éléments externes
(vidéos, pad...)

Avec YesWiki on ne réinvente pas le fil à couper le beurre et on peut facilement copier sur son voisin et récupérer des pages intéressantes ! On peut aussi tout simplement avoir besoin d'utiliser différents outils de travail coopératif et vouloir les centraliser dans notre gare centrale. Voici comment faire :

Un peu de vocabulaire

Un widget est un petit module qui permet à une page d'embarquer (encapsuler, intégrer... "embed" en anglais) et de re-publier dynamiquement des contenus et fonctions issus de services proposés par d'autres sites internet.

Quelques étapes très simples

1. Trouver le code iframe permettant l'intégration
Un site propose souvent d'afficher ses contenus ailleurs que "chez lui", en fournissant un morceau de code html (appelé iframe), qui se trouve dans les options "Partager" > "Intégrer" ou encore "iframe".
Ca peut ressembler à ça :
image partager.png (0.9kB)
image partageryoutube.png (2.8kB)
image intgrer.png (2.9kB)
Le code iframe que vous allez trouver ressemblera à ça :
<iframe name="embed_readwrite" src="https://unsite.com/iframe" width="100%" height="600" ></iframe>
Vous allez sélectionner et copier ce code pour aller le coller dans votre wiki.

2. Coller ce code dans ma page wiki
Une fois le code collé dans la page il faut penser à ajouter avant et après deux guillemets.
""coller ici le code HTML fourni par le site tiers""
3. Sauver et profiter !
Vous enregistrez ces modifications et vous pouvez profiter des fonctionnalités de cet autre site dans votre wiki : lire la vidéo, écrire dans le pad, lire un contenu ...

Bricoler le code

Changer la taille de la fenêtre
Le code iframe fourni peut être personnalisé, notamment pour les dimensions de la fenêtre intégrée.
Dans le bout de code à copier-coller, les paramètres width (largeur) et height (hauteur) permettent de spécifier la taille de ce cadre et ils sont renseignés en pixels. Vous pouvez modifier ces chifres pour ajuster la taille de la fenêtre.

Largeur
Le paramètre width= est indispensable. Il peut indiquer un nombre pixels ou un pourcentage de la taille de l'écran.
Pour que la fenêtre prenne toute la largeur et s'adapte à l'écran vous pouvez indiquer width=100%

Hauteur
L'insertion iframe peut configurer sa longueur automatiquement via la class class="auto-resize"

Ajouter ou enlever un cadre noir
La fenetre intégrée peut être encadrée ou non.
Dans la "class" vous pouvez préciser frameborder="yes" (avec cadre noir) ou frameborder="no" (sans cadre noir)
<iframe width="100%" src="https://unsite.com/iframe" class="frameborder="yes" ></iframe>


documentation facile videos widget