CODEWITHSUNDEEP
wordpressgoogle-chromevideobrowser
Porcellino80
Porcellino80

Reputation: 447

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

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 http://caniuse.com/ 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: http://chickapea.larchedigitalmedia.com/recipes/

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;
}

Upvotes: 0

Views: 3076

Answers (2)

user1724434
user1724434

Reputation: 698

The video is in fact visible on mobile but due to a built-in mobile browser filter, you cannot autoplay a video because it may consumes bandwidth on cellular data. The only way to play a video on mobiles is with user interaction, meaning that the user must click the play button if they want to watch it and of course consume their cellular data if they are not on WiFi. That said, I was able to see the video player on my iPhone when I visited your website but I am unable to click play due to your z-index value. You should either increase the z-index stack order for the video-container on mobiles so that users can click the play button, or replace the video-container with an image or slider on mobiles which is what most website do including Airbnb.com, paypal.com, etc. You can do that with @media class.

Upvotes: 2

user4520208
user4520208

Reputation:

For CSS

.bgvideo{
        position:fixed;
        right:0;
        bottom:0;
        min-width: 100%;
        min-height: 100%;
        width:auto;
        height:auto;
        z-index: -989; 
        -webkit-filter: brightness(.5);
        filter: brightness(.5);

}

in HTML

<video autoplay loop muted class="bgvideo">
    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader.mp4" type="video/mp4">
</video>

i did without codecs. run this code if it works then customize. this is Full Background video.

Upvotes: 0

Related Questions