Intégration de contenus dynamiques

Intégrer une vidéo youtube de manière responsive
Copier le code d’intégration proposé par Youtube puis dans le menu de mise en forme du texte, sélectionnez la décoration vidéo. Cette action ajoute des balises d’encadrement de type <video> </video>.

Exemple :
<video><iframe width="1044" height="803" src="https://www.youtube.com/embed/Ly3AacpPZdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></video>

L’intégration de contenus vidéos depuis le site est également possible. Pour ajouter des contenus multimédias contacter le service support de spip.

Balise d’intégration vidéo responsive

Intégrer un lecteur PDF

Pour intégrer un lecteur pdf de manière responsive, utiliser le code : <embed type="application/pdf" src="source PDF" width="xxx%" height="xxx" />

Paramètres :
– source PDF : (ex : /IMG/pdf/nom_du_fichier.pdf)
– width correspond à la largeur du PDF à écrire en % pour un site responsive (ex : 100%)
– height correspond à la hauteur du PDF en px (ex : 300)

Vous pouvez stocker votre fichier PDF au sein de votre site web dans la Médiathèque (« Édition/Document »), et ensuite récupérer l’adresse du PDF pour l’intégrer dans le code.

Exemple :

 <embed type="application/pdf" src="/IMG/pdf/kit_soweb_notice_osug.pdf" width="100%" height="450"  />



affichera le fichier PDF de manière ci-contre en s’adaptant à la largeur de la colonne.


Intégrer une carte interactive

L’intégration de cartes interactives est possible et bien supporté par Spip, pour cela il vous suffit :

► de copier le code d’intégration fournit par le lecteur de carte de type google map :
<iframe src="https://www....." width="100%" height="600"></iframe>

ou

► d’installer et configurer l’outil qui permet d’afficher des cartes interactives dans les pages pour les cartes opensource Leaflet.

  • Le code a rajouter dans une page est : 
    <link rel="stylesheet" href="/lib/leaflet/leaflet.css" />
<script src="/lib/leaflet/leaflet.js"></script>
<div id="name" style="width: 100%; height: 600px;"></div>
  • Puis ajouter le code javascript qui affichera la carte et les données de position. C’est un code qui peut être défini soit directement dans la page (<scrip> … </scrip>), soit être chargé à partir d’un fichier localisé sur un autre site web (<script src="https://  "></scrip>)
► Exemple de carte interactive intégrée depuis Google maps : https://portal.osug.fr/-EXPLORE-THE-INITIATIVES-

<iframe src="https://www.google.com/maps/d/embed?mid=1ilzdSSvkR4TPHCvlXAIzb7wu1osLi4zy" width="100%" height="600"></iframe>

► Exemple de carte interactive intégrée depuis Leaflet : https://www.isterre.fr/french/recherche/contrats-de-recherche/projets-europeens/article/gnss-products.html :

<link rel="stylesheet" href="/lib/leaflet/leaflet.css" />
<script src="/lib/leaflet/leaflet.js"></script>
<div id="gnss" style="width: 100%; height: 600px;"></div>
<script src="/public/GNSS/data.txt"></script>
<script src="/public/GNSS/gnss-map.js"></script></encartgris>

Mis à jour le 28 septembre 2021