[Resolved] Show Video in Header on Mobile Devices

[Mindy]

Hello, I see in the documentation that videos will not show in the header on mobile. I saw this website today that does still play a video header in mobile: https://www.belmond.com/

Is there a workaround to get video to play? Thank you!

[Leo]

Hi there,

Can you take a look at this?
https://generatepress.com/forums/topic/header-video-background-showing-on-mobile-instead-of-image/#post-786636
https://generatepress.com/forums/topic/header-video-background-showing-on-mobile-instead-of-image/#post-786924

Let me know 🙂

[Mindy]

Okay, I thought I figured it out but not so much…

[Mindy]

So replacing the recommended code from GP:

<video loop muted autoplay poster="#" class="background-video">
    <source src="videourl" type="video/mp4">

</video>

With this:

<video playsinline autoplay muted loop poster="placeholder.jpg" id="bgvideo" width="100%" height="100%">
<source src="videourl" type="video/mp4">
</video>

Along with this CSS:

video#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(placeholder.jpg) no-repeat;
background-size: cover;
}

Now the video shows on mobile, but it is no longer the background of the header. It is just a video playing under the title. Any ideas for getting it to be full screen / a full background video?

Thank you!

[Leo]

Can you try giving the new HTML a class like background-video so you can use the same CSS here?
https://docs.generatepress.com/article/page-hero-background-video/

[Mindy]

You are a genius! That simple change fixed it! I can’t thank you enough, Leo! You’re amazing!

[Leo]

Awesome to see that you are able to figure out with only little pointers from me 🙂

Good job!!

[Author]

Posts