18008 sujets

Questions générales et questions de débutants

[Résolu] Changer contenu html selon media queries

Bonjour, je développe actuellement un site sur le quelle j'ai intégré une vidéo et j'aimerai pouvoir changer cette vidéo lorsque l'on passe d'un écran mobile à un écran de pc.
Est-ce possible doit-je utilisé du javscript?
Bonjour,

Si vous voulez faire cela en css, vous devrez mettre toutes les vidéos dans l'html et cacher avec des media query. Le soucis c'est que peu importe la résolution d'écran, les videos seront toutes chargées et cachée en fonction.

L'idéal, pour avoir quelque chose de plus performant, c'est d'utiliser du JS et de changer la source de la vidéo
Bonjour Gus merci pour la réponse j'ai donc essayer de faire une fonction en js la voici mais celle-ci ne fonctionne pas. 
<body  onload="videoaccueil()" onresize="videoaccueil()" <?php body_class(); ?>>

<script type="text/javascript">
        function videoaccueil()
        {   
                var image = document.getElementById ("videoaccueil");
                if(screen.Width => 721)
                {
                         document.getElementById('videoaccueil').src="http://cartonnage-du-maine.local/wp-content/uploads/2020/04/Globe-cartons-animation_2.mp4";
                }
                else
                {
                        document.getElementById('videoaccueil').src="http://cartonnage-du-maine.local/wp-content/uploads/2020/04/Globe-cartons-animationtexte.mp4";
                }
         }

</script>

</script>
[code=html]<div class="videoaccueil"><a href="/nos-savoir-faire/"><video id="videoaccueil" src="http://cartonnage-du-maine.local/wp-content/uploads/2020/04/Globe-cartons-animation_2.mp4" preload="auto" autoplay="autoplay" loop="loop" muted="true" width="100%" height="auto"></a></div>

ma fonctionne est elle mauvaise ? Il m'affiche bien la première video puisque je lui est mit le lien en dur mais il n'applique pas le changement .
Modifié par snotra (03 Apr 2020 - 11:35)
Bonjour,
je ne comprends pas ta question. Une vidéo est distribuée en "streaming" sur un site, elle n'est pas chargée en totalité à l'ouverture de la page, mais à la demande du visiteur. Ce ne sera pas la vidéo dans sa totalité qui sera chargée ou pas, mais le lien ou l'image qui l'ouvrent. Si tu appelles la vidéo avec un lien, avec @media, tu pourras changer ce lien pour une autre vidéo. Pour ça, @media et display: none; feront l'affaire. Pas besoin de JavaScript. Si à la place du lien tu mets une image cliquable en appel de la vidéo, tu pourras par contre varier le format et le poids de cette image avec @media et srcset et tu devras utiliser usemap et map.
Exemple avec un lien:
<a href="Videos/Montage-Jelidunun.mp4" title="Vidéo complète du montage d'un jelidunun">télécharger la vidéo</a>

Et il ne faudra pas oublier :
video {
       max-width:100%;
       height:auto;
       border: 0;	
}

Ou alors je n'ai pas compris la question.
Bonjour, en fait la vidéo se trouve directement sous la barre de navigation elle sert un peu de bannière je veux donc qu'elle se lance automatiquement. La vidéo pour les écran de pc contient une animation et du texte sur un fond texturé. Alors que la vidéo qui doit apparaitre sur les écrans de portable ne contient que l'animation d’où mon besoin de changer le src selon le type d’écrans. J'ai bien entendu essayer de ne mettre qu'une seule vidéo avec le texte non intégrer à celle ci mais mettre le fond de la vidéo et le fond texte le rendu n’ été pas propre différence de couleur et décalage de texture.
@snotra
Je comprends mieux ton besoin, mais un lien serait souhaitable, afin de mieux se rendre compte.
Display: none; n'est en effet pas toujours bienvenu, mais utilisé à bon escient, il rend des services. D'autres solutions existent. Dans le cas de mes sites, display: none; ne me pose aucun problème, vu la façon dont je l'utilise.
Merci pour l'aide je viens d'essayer la solution proposé par Aliasdmc est celle -ci fonctionne parfaitement pour ce que je veux faire. Encore une fois merci.
Modifié par snotra (03 Apr 2020 - 16:37)
Sujet clos
Aller à