Lister des contenus depuis un site externe

Philippe Pomédio edited this page Dec 8, 2017 · 14 revisions

Il est possible d'afficher une liste de contenus publiés sur une instance de Pod (par chaîne / theme / utilisateur / type / discipline ou mot-clé) depuis une page servie depuis un autre site en utilisant :

  • la balise HTML <iframe>,
  • une librairie JS (iFrame Resizer, fournie par votre instance de Pod) facilitant les manipulations sur cette balise,
  • un peu de Javascript pour instancier et paramétrer le contenu de ladite librairie.

L'utilisation de JavaScript n'est pas obligatoire (voir dernier paragraphe).

Exemples

Voici quelques exemples de mise en œuvre, d'après les contenus d'UNS.Pod, listant des contenus correspondant à :

Marquage type

Ci-après un exemple de marquage listant les contenus de l'utilisateur « username » depuis l'instance de Pod « unspod.unice.fr » :

<script type="text/javascript"
        src="https://unspod.unice.fr/static/js/iframe-resizer/iframeResizer.min.js"></script>


<iframe id="pod_frame"
        src="https://unspod.unice.fr/videos/?owner=username&is_iframe=1"
        style="width: 100%; border: 0 none;"></iframe>


<script type="text/javascript">

    window.onload = function( ) {

        iFrameResize( {
                //checkOrigin: 'unspod.unice.fr',
                //bodyBackground: "#fff none no-repeat fixed center",
            },
            '#pod_frame'
        );
    };

</script>

Principe

Le principe consiste à appeler dans un iframe (attribut « src »)

<iframe id="pod_frame"
        src="https://unspod.unice.fr/videos/?owner=username&is_iframe=1"
        style="width: 100%; border: 0 none;"></iframe>

une URL existante de Pod, parmi celles listant les vidéos par chaînes / thèmes / utilisateurs / types / disciplines ou mots-clés (accessibles depuis le menu et la colonne de droite de la page d'accueil de Pod), puis à lui ajouter le paramètre « is_iframe » en donnant une valeur (n'importe laquelle) à ce dernier.

L'appel de fichier Javascript

<script type="text/javascript"
        src="https://unspod.unice.fr/static/js/iframe-resizer/iframeResizer.min.js"></script>

charge un outil permettant de le redimensionner (en hauteur) selon son contenu (entre autres possibilités, voir iFrame Resizer), à l'aide des quelques lignes de javascript

iFrameResize( {
        //checkOrigin: 'unspod.unice.fr',
        //bodyBackground: "#fff none no-repeat fixed center",
        bodyMargin: '16px 6px 0',
    },
    '#pod_frame'
);

qui le suivent, que vous pouvez encapsuler dans un

window.onload = function( ) {
    …
};

(ou pas) selon votre contexte (chargement du code Javascript dans <head></head>, juste avant </body>, utilisation d'un CMS, etc.).

Note : le paramètre checkOrigin peut contenir :

  • le nom de domaine du contenu de l'<iframe>, utile si ce contenu contient des liens vers un domaine différent de la valeur par défaut (voir ci-dessous) - mais cela ne se produira pas dans notre contexte d'utilisation ;
  • true (valeur par défaut, reprenant le domaine figurant dans l'attribut srcde l'<iframe>) ;
  • false (pas de contrôle de provenance du contenu de l'<iframe>).

Vous ne devriez pas, en principe, avoir besoin de modifier ce réglage. Si vous rencontrez des problèmes de redimensionnement, positionnez-le à false pour voir si cela débloque la situation.

Modifier l'aspect

Il est possible d'agir sur le fond de l'<iframe> en décommentant et éditant le paramètre bodyBackground. De même, les marges du <body> du contenu de l'<iframe>peuvent être ajustées (ainsi que d'autres paramètres, voir iFrame Resizer).

Enfin, les informations de style contenues dans l'attribut style de l'<iframe> peuvent être fournies séparément :

#pod_frame {

    width: 100%;
    border: 0 none;
    …
}

et éditées si nécessaire.

Version basique (HTML seul)

Si, peu importe la raison (CMS filtrant le marquage transmis par son éditeur en ligne notamment), l'utilisation de JavaScript n'est pas envisageable dans votre contexte, vous pouvez toujours utiliser le marquage de l'<iframe> seul.

<iframe src="https://unspod.unice.fr/videos/?owner=username&is_iframe=1"
        style="height: 1025px; width: 100%; border: 0 none;"></iframe>

Dans ce cas il faudra lui déclarer spécifiquement une hauteur, qui sera fixe (si cette valeur est insuffisante, l'<iframe> sera partiellement affiché et doté d'un ascenseur vertical).

Note : cette hauteur devra être exprimée en pixels si vos pages déclarent utiliser HTML5, les valeurs de hauteur d'<iframe> en pourcentage n'étant prises en compte qu'en HTML4.

Source

Vous pouvez télécharger une archive zip contenant un fichier HTML ayant servi de point de départ aux exemples ci-dessus.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.