My video does not run in background css on tablets or ipads. Only on PC

Asked

Viewed 585 times

1

Hello guys I have a video that runs normally in background css on PC. But when accessing the site by tablets or ipads it does not run.

See the code:

<video autoplay loop poster="torre.jpg" class="bg_video">
            <source src="bg.webm" type="video/webm">
            <source src="bg.mp4" type="video/mp4">
</video>

CSS:

.bg_video{
            position: fixed; 
            right: 0; 
            bottom: 0;
            min-width: 100%; 
            min-height: 100%;
            width: auto; 
            height: auto; 
            z-index: -1000;
            background: url(torre.jpg) no-repeat;
            background-size: cover; 
        }

I’ve put it in the format as they ask MP4 and WEBM, but nothing solves.

css html5

  • Have you checked whether the browser accepts this feature?

  • @Mike is the same from the pc

  • But it has already run on other browsers on your PC?

  • @Mike does, usually. Just don’t run on mobile devices.

  • What do you mean by run in the background?

  • @Pablo Run in background I got it. Only it’s only running on PC. On tablets and ipads it does not run.

  • I don’t understand what you mean by running in the background. You mean running while the browser is minimized?

  • @Pablo When I say run it means that the video does not run on tablets or ipads. Only on PC

Show 3 more comments

1 answer

1

In a similar situation I got the video to be shown on both iOS mobile devices and desktops with two actions:

1 - Privileging the version . mp4 (putting it first)

<video autoplay loop poster="torre.jpg" class="bg_video">
    <source src="bg.mp4" type="video/mp4">
    <source src="bg.webm" type="video/webm">
</video>

2 - Rendering the videos with the parameter Field Order: None (progressive). You will need to re-encode the videos if Field Order is different.

Codec support is not yet standardized on all browsers.

  • How I do this implementation?

  • @Gladisonneuzaperosini I changed the answer to make it clearer.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.