Ma vidéos en loop ne se lance qu'une fois sur 20

Bonjour à tous,

Je suis nouveau sur le forum et ravi !! ????

J'ai un soucis avec une vidéo qui devrait se lancer automatiquement dans ma page d'accueil mais selon les navigateurs et les moments, elle peut ne pas se charger.

Je souhaite avoir un avis sur mon code html et les modifications à effectuer pour avoir à coups sur ma vidéo qui se lance. Aussi je voudrais qu'une image s'affiche à la place quand la vidéo ne peut être jouer en autoplay.

J'espère avoir été clair sur ma demande.

Mon site est : www.strasbourg-taxi.fr en Worpress

Merci d'avance pour votre aide

Voici mon code pour la partie vidéo (enfin j'espère)

<?php

/**Template Name: Home page

 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package cshero
 */
global $post, $breadcrumb;
get_header(); ?>
<link rel="stylesheet" type="text/css" href="../assets/css/remodal-default-theme.css">
<link rel="stylesheet" type="text/css" href="../assets/css/remodal.css">
<?php $layout = cshero_generetor_layout();?>
<div class="remodal-bg">
	<div id="primary" class="content-area<?php if($breadcrumb == '0'){ echo ' no_breadcrumb_page'; }; ?><?php echo esc_attr($layout->class); ?>">
    <style type="text/css">
      .homepage-hero-module {
          border-right: none;
          border-left: none;
          position: relative;
      }
      .no-video .video-container video,
      .touch .video-container video {
          display: none;
      }
      .no-video .video-container .poster,
      .touch .video-container .poster {
          display: block !important;
      }
      .video-container {
          position: relative;
          bottom: 0%;
          left: 0%;
          height: 100%;
          width: 100%;
          overflow: hidden;
          background: #000;
      }
      .video-container .poster img {
          width: 100%;
          bottom: 0;
          position: absolute;
      }
      .video-container .filter {
          z-index: 100;
          position: absolute;
          background: rgba(0, 0, 0, 0.4);
          width: 100%;
      }
      .video-container video {
          position: absolute;
          z-index: 0;
          bottom: 0;
      }
      .video-container video.fillWidth {
          width: 100%;
      }
    </style>
    <div class="homepage-hero-module" style="max-height: 808px; min-height: 600px;">
      <div class="video-container">
          <!-- <div class="filter"></div> -->
          <video autoplay loop class="fillWidth">
              <source src="../assets/video/strasbourg-taxi-presentation.mp4" type="video/mp4" />
              <source src="../assets/video/strasbourg-taxi-presentation.webm" type="video/webm" />
          </video>
          <div class="poster hidden">
              <img src="../assets/video/strasbourg-taxi-presentation.png" alt="">
          </div>

Bonjour
Tu peux essayer poster

Tu peux essayer de mettre un attribut muted

ou un code que je n'ai pas encore eu le temps de vraiment tester
Au chargement de ta page tu fait un play();

var playPromise = oVideo.play();
  if (playPromise !== undefined) {
    playPromise.then(function() {
      //  Démarrage auto
    }).catch(function(error) {
       //pas de démarrage
    });
  }