Autoplay qui marche pas à tous les coups , besoin d'aide

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>