[LeannaParticipant]

I’m trying to get rid of as many plugins as possible so am trying to eliminate Video Bg plugin by using X native video bg with self-hosted mp4 but have the following issues:
1) On Edge the video does not cover, but falls short on the right side of the screen when screen is on normal resolution.
2) Video does not play at all on mobile, also poster image does not show up.
url: https://www.tellasia.org/rescue/childrens-homes/

[LeannaParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! Please take note that the background video will only rely on the size of the section container. The video will try to stretch itself to try to cover behind the entire section container. And the poster image will only appear on smaller screens because by default Videos will be automatically gets disabled on smaller screens. Most mobile users are on data plan and since videos are bandwidth hungry, this is why videos were disabled.

Hope this will explains it briefly.

[LeannaParticipant]

1) True – So what is holding my section container from becoming full width on MSEdge? It looks fine on Chrome with video going fullwidth.
2) I’m fine with the video not playing on mobile view but the poster image also does not show up, and that is a problem. Please advise.

[LeannaParticipant]

Poster shows up now on my mobile but big problem: NOTHING shows up on most browsers when I run it in browsershots. Please advise.

[LelyModerator]

Hi Leanna,

1.) Can you try adding the following custom CSS.
There’s difference on how IE loads the video.

.page-id-268 #x-section-1 .x-video .x-video-inner video {
    min-width: 100%;
    min-height: 100%;
}

Poster image is also working on real mobile when I checked. Browsershots is not accurate. Please try https://saucelabs.com/.

[LeannaParticipant]

I ran it on Saucelabs and still a number of browsers don’t show up the video at all (blank where video should go!) and others show it too short such as Ffox, Edge and IE. Inserting the code in Customizer did not result in any difference in the video width in Edge.

Several of X’s best theme previews show video background, so so surely there’s a solution that will ensure me the video OR the static image will show on all browsers without adding 3rd party plugins.

[LelyModerator]

Hello Leanna,

I tried to update above CSS to this:

/*VIDEO BG ON CHILDRENS HOME PAGE PLAY FULLWIDTH ON IE*/
.page-id-268 #x-section-1 .x-video .x-video-inner video {
    min-width: 100%;
    min-height: 100%;
    height:auto !important
}
.page-id-268 #x-section-1  {
    clear:both !important;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform-style:preserve-3d;
}

Try to clear cache and check again.

[LeannaParticipant]

It worked!! Great job… but it still doesnt seem to work at all on Mac

[JoaoModerator]

Hi Leanna,

Please clean your Mac Browser cache and test it again,

If it still doesn’t work, please let us know which browser you are facing issues.

Thanks

[LeannaParticipant]

ok it seems to be working… thanks

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts