We have many clients who want HTML 5 background videos on their landing pages. Apart from the fact that these videos do not play on iPhones they cause some serious LCP issues.
We tried setting the display setting for the container & the video to NONE for mobiles but when I run a performance report it still loads that container and the video (see attached).
My question is how we prevent this video from loading for all mobile devices.
Chris
Registered User
97 posts
Its A Kind Of Bali Magic
Registered User
5,077 posts
Online Now
There is a way to make background videos play on Iphones, if your clients think it's worth the delayed loading speed
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Its A Kind Of Bali Magic
Registered User
5,077 posts
Online Now
I have had a brainwave, for not loading the background video on mobile devices which might work,, I don't have access to Iphone at the moment to test it, do you have access??
If so Email me and I will give you a link,, so you can test it out
If so Email me and I will give you a link,, so you can test it out
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Chris
Registered User
97 posts
Wayan Jaya wrote:
There is a way to make background videos play on Iphones, if your clients think it's worth the delayed loading speed
There is a way to make background videos play on Iphones, if your clients think it's worth the delayed loading speed
Thank you for the reply, I have sent you my email address. I have an iPhone.
Sofar only one client requested specifically to display the video on phones, it works great for Android but not on iPhone. Your suggestion would be appreciated for this client.
We try and avoid videos for all mobiles, Google penalizes your listing when searching on a phone and your page has a huge payload.
Frank Cook
Registered User
1,558 posts
Chris wrote:
... So far only one client requested specifically to display the video on phones, it works great for Android but not on iPhone. Your suggestion would be appreciated for this client. ...
... So far only one client requested specifically to display the video on phones, it works great for Android but not on iPhone. Your suggestion would be appreciated for this client. ...
The size of the video shown in the screenshot from https://pagespeed.web.dev/ (LCP.jpg) could be reduced. It is, of course, a matter of judgement as to how much compression leaves a tolerable quality. I guess that, at least for narrow viewports, one could reduce substantially.
To show what I mean, I've temporarily put a reduction of that video to 1MB at https://fc7777.coffeecup.com/homepage-video-reduced.zip . I have no way of testing whether it would help on iPhones.
Frank
Inger
Senior Advisor
14,547 posts
I looked at it with my iPhone, and only the waterfall to the left in the first picture looked a bit weird. But the same happens when viewed on my PC.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Frank Cook
Registered User
1,558 posts
Chris
Registered User
97 posts
Frank Cook wrote:
To show what I mean, I've temporarily put a reduction of that video to 1MB at https://fc7777.coffeecup.com/homepage-video-reduced.zip . I have no way of testing whether it would help on iPhones.
Frank
To show what I mean, I've temporarily put a reduction of that video to 1MB at https://fc7777.coffeecup.com/homepage-video-reduced.zip . I have no way of testing whether it would help on iPhones.
Frank
Thank you for this, but sadly the quality of the video viewing it on a mobile device is extremely poor, it's even worse on a desktop monitor.
Sadly, when using a background video, you have no option to load a smaller video or even another file on narrow viewports. If it were possible, it would solve my problem.
Frank Cook
Registered User
1,558 posts
Chris wrote:
... Sadly, when using a background video, you have no option to load a smaller video or even another file on narrow viewports. If it were possible, it would solve my problem.
... Sadly, when using a background video, you have no option to load a smaller video or even another file on narrow viewports. If it were possible, it would solve my problem.
It can be done using a duplicate of the Background Video Element (BVE) with a different video and using display:block and display:none to switch them at a breakpoint. Having a duplicate makes only a trivial difference to the project size. Apart from having the different video, one is usually duplicating only a container and some text elements.
Because it seems that one cannot mess with the class names in BVE's, it's necessary to use IDs for them and to switch the settings using Apply Styles 'To this element id only' as in the example at https://fc7777.coffeecup.com/bve-switch.rsd .
Frank
Inger
Senior Advisor
14,547 posts
I exported Frank's file and tested it with my iPhone. None of the video files will play. On my iPad they do.
Frank may have heard me saying that my iPhone is very old, version 6. Well, last week I took the plunge and upgraded to iPhone 13, so it has all the bells and whistles of a new one
Frank may have heard me saying that my iPhone is very old, version 6. Well, last week I took the plunge and upgraded to iPhone 13, so it has all the bells and whistles of a new one
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
