[Resolved] image by video mobile version background container

[Javier]

https://docs.generatepress.com/article/background-video/
Hello, I have followed these steps of the documentation and PERFECT, it works as it is. The question arises from how it would in the mobile version show only the image of the postry hide the video, so as not to delay the loading of the web too much THANKS,

[David]

Hi there,

you should be able to do this:

<video loop muted autoplay playsinline poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL/TO/video.mp4" type="video/mp4" media="(min-width: 768px)">
</video>

See the addition of the media="(min-width: 768px)" attribute, that will tell the browser to only load the source on screens over that min-width

[Javier]

Hello, it didn’t work for me, I thought maybe it wasn’t represented with webm files, but I tried it with an mp4, I don’t know what my mistake is.

<video loop="" muted="" autoplay="" playsinline="" poster="/wp-content/uploads/2023/03/nrd-D6Tu_L3chLE-unsplash.jpg" class="background-video">
    <source src="/wp-content/uploads/2023/03/slider-video.mp4" type="video/mp4" media="(min-width: 768px)">
</video>

[Ying]

Can you try removing the playsinline attribute?

let me know if it works!

[Javier]

It still doesn’t work, I’ll try another option, THANKS

<video loop="" muted="" autoplay="" poster="/wp-content/uploads/2023/03/nrd-D6Tu_L3chLE-unsplash.jpg" class="background-video">
    <source src="/wp-content/uploads/2023/03/slider-video.mp4" type="video/mp4" media="(min-width: 768px)">
</video>

[Ying]

It still doesn’t work, I’ll try another option, THANKS

I just loaded your site on my phone and the video is not loading. Can you give it a try using an incognito window?

[Javier]

now yes, perfect Ying, I would have some cache activated, thanks for the interest

[Ying]

No problem 🙂

[Author]

Posts