BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - Fond dynamique OK sur PC mais KO sur Android
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Fond dynamique OK sur PC mais KO sur Android

 Répondre Répondre Page  123 5>
Auteur
Message
BIgsausage64 allez vers le bas
Newbie
Newbie


Depuis le: 15 Mai 2021
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer BIgsausage64 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Fond dynamique OK sur PC mais KO sur Android
    Envoyé : 15 Mai 2021 à 13:37
Bonjour,

Comme l'indique le titre, j'ai un site (template sensblack) où le fond dynamique marche parfaitement sur PC mais affiche désespérément une image noire et pas de vidéo, que ca soit sur edge ou chrome sur un android (samsung S20).

Lorsque je demande à Edge ou Chrome d'afficher la version "pour ordinateur" de la même page, alors la video s'affiche, ce n'est donc pas un problème technique de codec, format vidéo ou autre, juste une "restriction" par rapport aux visiteurs sur mobile.

Comment puis-je faire fonctionner mon fond dynamique sur PC et sur smartphone (et tablette et tutti quanti...) ?

Merci d'avance pour votre aide et un grand bravo aux dev !!!!!!!
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 15 Mai 2021 à 16:55
À moins que quelqu'un n'ait la réponse, je vais devoir étudier le code de l'élément.

Voici mon impression: 

Lorsque le site est ouvert sur un petit écran, l'image alternative doit être affichée quoi qu'il arrive.

Mettez une image alternative dans l'élément pour vois si elle passera à la place de la vidéo.

On pourra partir de là.




Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 15 Mai 2021 à 17:16
difficile de savoir si cela vient de votre vidéo ou du template.
Testez ce projet "béta" qui contient une vidéo : http://sensode.ovh/sensbeach/

et pensez aussi à nous donner l'adresse du site web, ca peut aider.
Haut de la page
BIgsausage64 allez vers le bas
Newbie
Newbie


Depuis le: 15 Mai 2021
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer BIgsausage64 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 15 Mai 2021 à 22:37
Merci pour vos retours !!

J'ai déjà réussi à voir une image alternative pendant mes tests mais je n'y arrive plus avec mes photos.

J'ai essayé de redimensionner mes photos, j'ai essayer avec d'autres photos, cela ne change rien j'ai toujours une page noire.

En utilisant les photos inclus dans OE, cela fonctionne, mais quoi qu'il en soit mon objectif, si c'est possible, est de pousser la vidéo, tout le temps, quelque soit le support utilisé pour consulter le site et ne jamais avoir l'image fixe (je voudrais une page vide de tout contenu mais qui affiche la vidéo en background). Peu m'importe les problèmes de ratio d'image etc......

Le site est en construction, je ne l'avais pas publié mais voici l'URL (le certificat est périmé depuis moins d'un mois, je suis en train de renommer ma société donc j'attends pour prendre un certificat avec le futur nom de domaine) :
https://test.atlas-conseil.com/

Lorsque je test http://sensode.ovh/sensbeach/ sur mon PC la vidéo se lance bien
Lorsque je test depuis mon smartphone, j'ai l'image fixe
Lorsque je test depuis mon smartphone et que je demande à voir la page pour PC, la video s'affiche sans souci.

Et comme le dit mon profil, je suis un noob donc toutes mes excuses si la réponse est évidente. J'ai essayé de bidouiller par moi-même mais sans succès, j'ai décidé d'écrire ici....

J'espère vraiment que vous allez trouver le problème !!! Encore merci pour votre aide


Edité par BIgsausage64 - 16 Mai 2021 à 12:06
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 16 Mai 2021 à 15:42
Utiliser l'élément pour faire ça, c'est utiliser un bazooka pour tuer une mouche

<div class="video-container">
    <video autoplay muted loop>
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
    </video>
    <div class="caption">
      <h2>Your caption here</h2>
    </div>
</div>

.video-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 16 Mai 2021 à 15:45
Ne perdez pas de vue que sur un mobile le texte risque d'être trop large pour l'écran.

Je ferais rouler la vidéo dans un div de largeur contrôlée selon l'écran sur un fond noir.
Haut de la page
BIgsausage64 allez vers le bas
Newbie
Newbie


Depuis le: 15 Mai 2021
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer BIgsausage64 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 16 Mai 2021 à 16:48
Merci Hobby001,

J'utilise OE car je n'y connais rien en code. J'ai désactivé le fond dynamique en page d'accueil pour essayer votre solution.

Si j'ajoute le premier bloc de code, ma vidéo s'affiche mais elle est alignée à gauche (sur PC), pas centrée. Je n'ai pas du mettre le code au bon endroit.

Sur smartphone, j'arrive sur une très grande page dans laquelle je dois scroller (dans les 2 directions) pour trouver ma vidéo.

Si j'insère un élément "bloc de code visuel" et que je le positionne dans mon panneau d'élément, sur PC la vidéo est centrée mais n'occupe pas le plein écran et sur smartphone, retour a la case départ, écran noir.

Lorsque j'insère le 2è bloc de code, il apparait en texte clair sur ma page. Dois-je le mettre dans une section particulière ? Ne manque-t-il pas quelque chose ? sans vouloir vous offenser.

Désolé mais je suis noob de noob en dev

Si vous checkez ma page "terre" telle qu'elle est, c'est exactement ce que je veux comme résultat. La vidéo occupe tout l'espace disponible. Juste, cela ne s'affiche pas sur mobile. N'est-il pas plus simple de corriger le Template plutôt que d'ajouter du code ?

Encore merci !!!!


Edité par BIgsausage64 - 16 Mai 2021 à 18:17
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 17 Mai 2021 à 05:04
Bonsoir, 


Suivez les instructions d'installation.

Insérez cet élément à la place du titre sur la page (enlevez l'élément texte):  


Donnez-lui une largeur de 100% et centrez-le.

Configurez votre fichier mp4 dans les propriétés

Voici le résultat:  https://denislafrance.net/Bigsausage64/  (je détruirai ce démo dans quelques jours)


Edité par Hobby001 - 17 Mai 2021 à 05:13
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 17 Mai 2021 à 05:11
N'oubliez pas d'enlever l'élément fond d'écran dynamique, ça allègera votre page
Haut de la page
BIgsausage64 allez vers le bas
Newbie
Newbie


Depuis le: 15 Mai 2021
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer BIgsausage64 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 17 Mai 2021 à 09:08
Merci Hobby001 le résultat est top !! je vais DL tout ca et je vais suivre les instructions !!!

Merci Merci Merci :D
Haut de la page
 Répondre Répondre Page  123 5>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.062 secondes.