HTML Video tag not working on safari and mobile phones

I have the following code for autoplaying a video on my page.

The thing is that the video works good on desktop browsers, but on desktop safari and mobile browsers it displays me only the cover image instead of playing the video.

I've tried a couple of solutions fount on internet but none of them seems to be working for me.

       <section class="video-bg">
        <div class="embed-responsive embed-responsive-16by9">
          <figure class="overlay">
            <video autoplay class="embed-responsive-item" poster="videos/cover.jpg">
              <source src="videos/landing_page_video_vimeo5_converted.mp4" type="video/mp4">
              <source src="videos/landing page video vimeo5.ogg" type="video/ogg">
              <source src="videos/landing page video vimeo5.ogg" type="video/webm">
            </video>
            <figcaption>
              <h1>text</h1>
              <p>text</p>
              <p>text</p>
              <p>text</p>
              <a class="video-play" data-toggle="modal" data-target="#myModal"></a>
            </figcaption>
          </figure>
        </div>
      </section>

Solution

The autoplay feature is disable by Apple from iOS 6.1, see here

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

Plus this source

 <source src="videos/landing page video vimeo5.ogg" type="video/webm">

should be .webm due to your type being video/webm

Just a hint, try having the same name for the sources, avoiding spaces.