Intégrer un contenu en ligne

Vous désirez intégrer un contenu en ligne sur votre blogLe terme blog vient de l'anglais. Il est issu de la contraction des mots "Web Log" qui signifie "carnet de bord Web". Un blog est un site Web personnel dans lequel un ou plusieurs auteurs publient au fil du temps des articles. Par défaut le blog a une page principale où s'affiche tous les articles publiés, de façon antéchronologique (du plus récent au plus ancien). C'est que qu'on appelle donc une "page de blog" ou "page des articles"..

Ce peut être :

• une vidéo (Peertube de la DANE, YouTube, Dailymotion, …) ;
• un son (SoundCloud, …) ;
• une application (Learning Apps, …) ;
• une carte (OpenStreetMap, QwantMap) …

Voici deux méthodes selon le type de contenu.

Le plus simple

Glisser-déposer l’URLUne URL (sigle de l’anglais : Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), aussi appelée adresse Web, est une chaîne de caractères qui permet d'identifier une ressource du Web par sa localisation et de préciser le protocole à utiliser L'URL est comparable à l'adresse postale indiquée sur un colis sur lequel on précise en plus "par avion" ou "par bateau" (adresse + moyen de transport du contenu). Exemples • L'URL https://blog.ac-lyon.fr indique que ce blog est située sur un serveur se trouvant au Rectorat de Lyon et qu'elle est accessible grâce au protocole sécurisé HTTPS.• https://blog.ac-lyon.fr/tout-comprendre/glossaire/u-comme/ est l'URL permettant d'afficher cette... du contenu à intégrer dans l’article.

Si WordPress le reconnaît comme contenu embarqué, il crée automatiquement le bloc dédié.

Vidéo prochainement.

Bloc dédié

Pour certains sites proposant des contenus en ligne, l’éditeur Gutenberg propose des blocs spécifiques. C’est très pratique et rapide, mais vous ne pourrez pas choisir les paramètres.

1. Sur le site où se trouve le contenu à intégrer, chercher le bouton « Partager » et copier l’URLUne URL (sigle de l’anglais : Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), aussi appelée adresse Web, est une chaîne de caractères qui permet d'identifier une ressource du Web par sa localisation et de préciser le protocole à utiliser L'URL est comparable à l'adresse postale indiquée sur un colis sur lequel on précise en plus "par avion" ou "par bateau" (adresse + moyen de transport du contenu). Exemples • L'URL https://blog.ac-lyon.fr indique que ce blog est située sur un serveur se trouvant au Rectorat de Lyon et qu'elle est accessible grâce au protocole sécurisé HTTPS.• https://blog.ac-lyon.fr/tout-comprendre/glossaire/u-comme/ est l'URL permettant d'afficher cette... du contenu qui commence par http.
2. Dans les blocs de « Contenus embarqués » proposés par l’éditeur Gutenberg de WordPress, choisir le bloc correspondant au site concerné.
3. Coller l’URLUne URL (sigle de l’anglais : Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), aussi appelée adresse Web, est une chaîne de caractères qui permet d'identifier une ressource du Web par sa localisation et de préciser le protocole à utiliser L'URL est comparable à l'adresse postale indiquée sur un colis sur lequel on précise en plus "par avion" ou "par bateau" (adresse + moyen de transport du contenu). Exemples • L'URL https://blog.ac-lyon.fr indique que ce blog est située sur un serveur se trouvant au Rectorat de Lyon et qu'elle est accessible grâce au protocole sécurisé HTTPS.• https://blog.ac-lyon.fr/tout-comprendre/glossaire/u-comme/ est l'URL permettant d'afficher cette....
4. Cliquer sur le bouton « Intégrer »

Bloc HTML

1. Sur le site où se trouve le contenu à intégrer, chercher le bouton « Partager », puis « Intégrer », éventuellement sélectionner des paramètres et copier le code obtenu qui commence par la balise <iframe>.
2. Dans les blocs de « Mise en forme » proposés par l’éditeur Gutenberg de WordPress, choisir le bloc « HTMLHTML est l'acronyme de HyperText Markup Language. C'est un langage permettant de créer et mettre en page des pages Web (pages de sites, blogs ou autres contenus que l'on trouve sur Internet). Le HTML permet de structurer la page et de préciser son contenu (titre, paragraphe, image, lien, ...). Il est souvent utilisé conjointement avec le langage CSS (qui précisera les attributs de chaque objet). personnalisé ».
3. Coller le code <iframe>.
4. Pour avoir un aperçu, cliquer sur « Aperçu » dans le menu du bloc.

Modifier le code « iframe »

Supprimer les suggestions de vidéos YouTube

Par défaut, d’autres vidéos sur le même thème sont proposées sans aucun contrôle de votre part à la suite de la lecture de la vidéo intégrée.

Voici un exemple de code pour une vidéo tel que copié sur le site

<iframe width="560" height="315" src="https://www.youtube.com/embed/i2GXsVy4xqU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Voici le code modifié pour supprimer les suggestions d’autres vidéos qui apparaissent après la lecture de la vidéo intégrée :

<iframe width="560" height="315" src="https://www.youtube.com/embed/i2GXsVy4xqU?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

On a simplement ajouté ?rel=0 juste après l’URLUne URL (sigle de l’anglais : Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), aussi appelée adresse Web, est une chaîne de caractères qui permet d'identifier une ressource du Web par sa localisation et de préciser le protocole à utiliser L'URL est comparable à l'adresse postale indiquée sur un colis sur lequel on précise en plus "par avion" ou "par bateau" (adresse + moyen de transport du contenu). Exemples • L'URL https://blog.ac-lyon.fr indique que ce blog est située sur un serveur se trouvant au Rectorat de Lyon et qu'elle est accessible grâce au protocole sécurisé HTTPS.• https://blog.ac-lyon.fr/tout-comprendre/glossaire/u-comme/ est l'URL permettant d'afficher cette... de la vidéo.

Attention comme c’est du code, si vous faites une erreur la vidéo peut ne plus s’afficher.

Source : https://aide.jimdo.com/aller-plus-loin-avec-jimdo/supprimer-la-suggestion-de-vid%C3%A9os-youtube/

Edit du 10 janvier

Apparemment YouTube a supprimé la possibilité d’enlever les suggestions. Le code « ?rel=0 » aura comme effet selon les vidéos soit de supprimer TOUTES les suggestions, soit de ne garder que les suggestions de la même chaîne. Ce n’est pas satisfaisant, mais cela permet tout de même de garder un peu de contrôle sur les suggestions.

Supprimer la lecture continue DailyMotion

Par défaut, d’autres vidéos sur le même thème seront lancées en lecture continue sans aucun contrôle de votre part à la suite de la lecture de la vidéo intégrée.

Voici un exemple de code pour une vidéo tel que copié sur le site

<iframe frameborder="0" width="480" height="270" src="https://www.dailymotion.com/embed/video/x6wevas" allowfullscreen allow="autoplay"></iframe>

Voici le code modifié pour supprimer les suggestions d’autres vidéos qui apparaissent après la lecture de la vidéo intégrée :

<iframe frameborder="0" width="480" height="270" src="https://www.dailymotion.com/embed/video/x6wevas?queue-enable=false" allowfullscreen allow="autoplay"></iframe>

On a simplement ajouté ?queue-enable=false juste après l’URLUne URL (sigle de l’anglais : Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), aussi appelée adresse Web, est une chaîne de caractères qui permet d'identifier une ressource du Web par sa localisation et de préciser le protocole à utiliser L'URL est comparable à l'adresse postale indiquée sur un colis sur lequel on précise en plus "par avion" ou "par bateau" (adresse + moyen de transport du contenu). Exemples • L'URL https://blog.ac-lyon.fr indique que ce blog est située sur un serveur se trouvant au Rectorat de Lyon et qu'elle est accessible grâce au protocole sécurisé HTTPS.• https://blog.ac-lyon.fr/tout-comprendre/glossaire/u-comme/ est l'URL permettant d'afficher cette... de la vidéo.

Attention comme c’est du code, si vous faites une erreur la vidéo peut ne plus s’afficher.

Source : https://faq.dailymotion.com/hc/fr/articles/360000713928-D%C3%A9sactiver-la-lecture-en-continu

Paramètres modifiables pour SoundCloud

Par défaut, les commentaires, les recommandations et les superpositions SoundCloud accompagneront le son intégré depuis SoundCloud.

Voici un exemple de code pour un son tel que copié sur le site

<iframe scrolling="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/546756534&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true" width="100%" height="300" frameborder="no"></iframe>

Les paramètres que vous pourriez vouloir modifier sont :

• hide_related qui peut valoir « true » si vous ne voulez pas de suggestions en fin de lecture ;
• show_comments qui peut valoir « false » si vous voulez cacher les commentaires ;
• show_user qui peut valoir « false » si vous voulez cacher le nom de l’utilisateur qui a déposé le son sur SoundCloud ;
• visual qui peut valoir « true » si vous préférez le visuel classique .

Voici le code modifié pour supprimer les suggestions d’autres sons qui apparaissent après la lecture du son intégré :

<iframe scrolling="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/546756534&color=%23ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true" width="100%" height="300" frameborder="no"></iframe>

On a simplement remplacé « false » par true dans le paramètre hide_related.

Attention comme c’est du code, si vous faites une erreur la vidéo peut ne plus s’afficher.

Tutos vidéos