Why am I not able to display a mp4 video on chrome?

[admin]

I'm building a website on wordpress, I tried to upload a mp4 video file through my dashboard but I wasn't able to do so. So I simply uploaded through my filezilla. Then I style a little bit and after I worked on the autoplay and stuff like that, I tried on my chrome browser, when I found out that it doesn't work. The weird thing is that this very video is possible to be displayed from all the other browser: firefox, safari and opera. The weirder thing is that on <a href="http://caniuse.com/" rel="nofollow">http://caniuse.com/</a> I discovered that indeed this extention should be supported by chrome.
Here's my code:

 <div class="video-container">
                <video autoplay loop id="bgvid">
                    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader3.mp4" type="video/mp4"> 
                </video>
            </div>

and here it is the css:

video#bgvid { 
    position: relative;
    width: 100%;
}
.video-container {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    z-index: -100;
}

and bootstrap as a framework.

Any clue why it is not displayed on chrome?

UPDATE:

Here is the link of the webpage where the video is: <a href="http://chickapea.larchedigitalmedia.com/recipes/" rel="nofollow">http://chickapea.larchedigitalmedia.com/recipes/</a>

ANOTHER UPDATE:

There are two main problems: I added another format and an image in order to create a fallback, in case the browser doesn't support mp4 (I downloaded an app for mac called free mp4 converter to solve the problem of the fact that my video was a m4v even if it had a mp4 extension, even in that case it didn't work) so now it is visible on google chrome, but it is not visible on my phone (android - nexus 5x). So I don't really have a clue about what it is going on (my phone is not able to display the video and when I scroll down there's a weird effect with the element that I put on the video, a div with an h2 inside).

My code now is:

<div class="out">
                    <div id="in">
                        <h2>Chickapea Blog</h2>
                    </div>
                </div>
            <div class="video-container">
                <video autoplay loop id="bgvid">
                    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader.webm" type='video/webm;codecs="vp8, vorbis"'/>
                    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
                    <img src="<?php bloginfo('template_directory'); ?>/images/background-faq.jpg" title="Your browser does not support the <video> tag">
                </video>
            </div>

And the css is:

.recipes .out {
    text-align: center;
    z-index: 2;
    position: absolute;
    width: 60%;
    height: 29%;
    margin-left: 20%;
    margin-right: 20%;
    top: 50%;
    border: 3px solid white;
}
.recipes #in {
    position: relative;
    width: 80%;
    height: 70%;
    margin-left: auto;
    margin-right: auto;
    top: 15%;
    background-color: rgba(141,198,63,0.6);
    padding: 4%;
}
.recipes #in h2 {
    font-family: 'Knewave', cursive;
    color: white;
}

for the video:

video#bgvid { 
    position: relative;
    width: 100%;
}
.video-container {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    z-index: -100;
}