Affichage Vidéo sur homepage (DAWN). Probleme d'affichage & d'autoplay sur IPHONE (Safari)

Français Discussions Questions et réponses sur des sujets techniques
1

Bonjour,

Je réalise actuellement un site, ( http://www.aymardvernay.com/ ) assez simple pour la promos d’un sportif, je souhaite afficher une vidéo sur sa home page et j’ai donc créer une vidéo qui s’affiche dans un bloc de “liquid personnalisé” (que vous pouvez voir directement (si vous n’etes pas sur safari mobile))

La vidéo est hebergé sur le back office du site shopify ( https://cdn.shopify.com/videos/c/o/v/ad789b303b0d4924b7e24a1c5c403459.webm ) et je l’ai affiché comme ceci:

<style>
video {
  display: block;
  margin: 0 auto;
  width: 100%;
}

@media screen and (max-width: 800px) {
  video {
    width: 100%;
    }
  }
</style>

<video autoplay loop playsinline muted>
  <source type="video/webm" src="https://cdn.shopify.com/videos/c/o/v/ad789b303b0d4924b7e24a1c5c403459.webm" />
</video>

Sur PC (edge, opera) ca fonctionne, sur android (chrome) ca fonctionne, mais sur safari Iphone (70% (minimum) des utilisateurs) le block reste blanc, pas de chargement, RIEN.

Je farfouille un peu et je trouve que ce problème est connu, récurent et depuis longtemps, la vidéo aujourd’hui est le meilleur moyen de communiquer et d’imager des propos et j’aimerais tellement pouvoir afficher la meme experience pour tout le monde.

Si vraiment ce n’est pas possible, dans le cas ou la vidéo ne peut VRAIMENT PAS s’afficher comme tel, pourrais-je modifier le code pour afficher un gif (qui va malheureusement me faire perdre de la qualitée) pour les utilisateurs mobiles?

Si oui comment?

Je suis très débutant dans tout ca et jy est déja passé pas mal de temps pour arriver jusque là, je compte sur vous.

Merci d’avance.

B.N.

2

Hello BN

Je pense que ton problème peut venir du fait que le format webm est mal supporté sur IOS, je te conseil de faire un test en changeant le format de ta vidéo, en tout cas ça vaut le coup d’essayer.

Bonne journée

3

Salut Mika,

Merci pour ta reponse, hélas pas de différence sauf un chargement 3 fois plus long sur les autres devices…

Quelqu’un d’autre?

4

meme problème que toi j’ai manipulé le code pour mettre un gif en fond d’écran au thème et la boutique bug sur iphone le fond d’écran ne s’affiche pas, si quelqun à une solution je suis preneur

5

Bonjour @harry13013 !

Quel thème utilisez-vous sur votre boutique ?

S’il s’agit d’un thème Shopify, je vous conseille alors de contacter notre assistance support par email. En effet, bien que nous ne proposons pas d’aide pour la modification du code du thème sur le forum communautaire, nous avons une équipe spécialisée disponible par email. Chaque marchand Shopify utilisant un thème Shopify a le droit à une aide à la personnalisation de 60 min comme indiqué dans cette documentation. Bien évidemment, avant que notre équipe puisse vous aider, il faudra supprimer tout le code personnalisé que vous avez pu mettre car ils ne pourront pas aider dans le cas contraire.

Si vous n’utilisez pas de thème Shopify alors je vous conseille de contacter un expert Shopify qui pourra vous aider à mettre en place cela sur votre boutique. Vous pouvez également consulter notre catalogue d’applications tierces qui permettent la personnalisation avancée des pages de votre boutique comme Pagefly par exemple.

Je reste en attente de votre retour, je suis également disponible pour toute question.