html5 video background, iPhone - Post...

User 179977 Photo


Registered User
158 posts

I am using Site Designer 4 and have a background video that works perfectly on the site when viewed with a computer. When viewed with an iPhone it is a static image and the video doesn't play. I googled the problem and it seems to be that the video must be muted to auto play on the phone. I checked the video settings in SD and it is muted in the settings. I could not find any posts in the forums about this problem. Is there a way to have the background video play on smaller screens?
User 122279 Photo


Senior Advisor
14,550 posts

Which Framework?
Have you used a CC video component that came with the app?
Link to the site?

If you have been using a video component, I've seen that they often are using a 'poster' (an image of the opening scene of the video) to save some bandwidth on mobile devices. The video will then start playing after the 1st or 2nd breakpoint.

Actually, having a video auto-start with sound is a big no-no. Just imagine how that might disturb if opened say in a library or some other public place where silence is necessary.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 179977 Photo


Registered User
158 posts

I am using the foundation framework. The video has no sound, so that is not even an issue, but you make a valid point. I am using the video component that came with the app. I have a poster image selected, but that is not what is displayed. Displayed is a "still" of a video frame. This is not a major deal and I can live with the way it is. However, I would prefer the poster image to a video frame and am not sure why it does not display the poster image. Thanks
User 122279 Photo


Senior Advisor
14,550 posts

There should be a folder 'overlay' inside the Video container. Try to remove that overlay folder.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 179977 Photo


Registered User
158 posts

The video says HTML5 video and there is no container for the overlay. If I highlight the HTML5 video, the element properties has a "Poster" drop down where you can choose a local image, online image, or no image. I currently have chosen a local image, but as I said earlier, it does not display. Thanks
User 122279 Photo


Senior Advisor
14,550 posts

I can make the video play at any viewports, but since I have SD5 and you are using a nearly one-year-old version, I cannot send you the file, because you wouldn't be able to open it. It would be best if you upgraded, otherwise you can hope for someone else, who is using the same version as you do, coming to help you.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 179977 Photo


Registered User
158 posts

Thanks very much for your time. I will be upgrading for sure, but not right away. Thanks again.
User 176817 Photo


Registered User
61 posts

Might just be an IPhone IOS issue with video background problems. I have never been able to get it to run on IOS Devices. Below is a link to how to do video backgound at w3schools.com. Also a link to the Urban Folks template that if you look at the preview template, and you go to the bottom of the tempate page you will see the train backgound is static on IOS devices.
Both links work great on computers but static on IPhones and IPads. Appears Iphones are not yet ready for video backgrounds.
Just use a breakpoint for lower widths to display Static Pic only.

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
https://themes.coffeecup.com/urban-folks.html

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.