Header video not responsive on mobile

Hi there . As you can see on www.nencit.fr I have a video as header.
I would like that on mobile become responsive since at the moment in not responsive… it’s to small.
How can I do it on mobile so that it will be like on pc?
In addition to that I would like to disable hovering with the mouse pointer, or make the pointer inactive on the video.
Can you please help?
best regards

Hello,

First thanks for using our Sydney theme!

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media only screen and (max-width: 991px) {
    .site-header.fixed {
        position: absolute !important;
    }

    #pg-118-0 > div {
        padding: 150px 0px 100px !important;
    }
}

@media only screen and (max-width: 767px) {
    #pg-118-0 > div {
        padding: 195px 0px 100px !important;
    }
    #pg-118-0 > div .panel-grid-cell {
        padding: 0 !important;
    }
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo
Thanks for your support.
on mobile is still too small and it loads a bit slower.
Can you please tell me ho to increaze the size and height on mobile so that it can fit the header area?

best regards
Fabrzio

Hello Fabrizio,

Can you please tell me ho to increaze the size and height on mobile so that it can fit the header area?

Unfortunately that’s not possible. If we do that both sides and content of the video will be “cut”. Your video has an wide aspect ratio that should be maintained on mobile too.

it loads a bit slower.

Your video has 1.6MB, you can try using some available tool on web to decrease the video quality and consequently the size.

We hope this helps!

Kind Regards,

Rodrigo.

aThemes Support