Affichage de contenu différent en fonction du media

Bonjour,

Je développe un site avec Wordpress.
Sur la page d'accueil, j'aimerais afficher selon le media utilisé :
- Téléphones, tablettes : un gif animé ;
- Résolutions > 1024 : une vidéo plein écran en boucle et en lecture auto

Comment feriez-vous ?
1- CSS : en masquant la vidéo pour les téléphones et tablettes (mais dans ce cas, c'est un peu idiot de la charger quand même, ce qui rallonge le chargement de la page)
2- en php et javascript : en récupérant la taille de l'écran en javascript et en décidant d'afficher tel ou tel contenu en fonction de cette variable.

Merci pour vos éclairages

Tu n'est pas obliger de "charger" si l'element est cacher

Sinon oui, j'utiliserais du CSS avec les media queries

Intéressant, je vais tenter de le faire en CSS. Merci !

hors sujet
Modifié par niuxe (15 Mar 2016 - 16:41)

Bonjour,
Je ne sais pas où tu en es ni si la solution proposée fonctionne. En voici une autre qui pourrait fonctionner pour afficher le gif sur mobile et la video sur desktop.
1. Place mobile_detect.php (à télécharger ici) dans le dossier de ton thème via ftp
2. Place un code comme celui qui suit dans le template où tu souhaites afficher le gif/video

<?php include_once('mobile_detect.php');
    $detect = new Mobile_Detect(); 

    if ( $detect->isMobile() ) {
                echo '<div id="ton-gif"></div';
    }
    else {
                echo '<div id="ta video">ta video</div>';
    }
?>

Je suis pas un pro mais je crois que ça pourrait marcher...
Je crois aussi qu'en te basant sur les résolutions en media-queries tu risques d'afficher la vidéo sur les ipads et les iphones qui, il me semble, doublent la définition d'écran.

Si je me trompe, merci de me corriger... si j'ai raison merci de confirmer (à toi et aux autres lecteurs)

A bientôt,
Tche