- This topic has 9 replies, 2 voices, and was last updated 3 years, 10 months ago by
.
I have a video background on one of my sections, with MP4 URL specified (for Safari) and WebM URL specified (for all others). On Chrome, the video plays well, and everything is as expected. On Safari (tested on both Mac and iOS), the video doesn’t play.
I copied the video tag from HTML source into a local file and opened that file in Safari. The video automatically starts and plays fine. This leads me to believe that something within the theme or elsewhere on the page may be interfering.
See private field for page URL. Please advise.
Thanks!
Jon
Hi Jon,
I hope you are well today and thank you for your question.
I confirmed the issue on your website.
To check whether it is the video-specific issue, could you please try using a different video?
Also, this can be due to plugin conflict on your site so please try temporarily deactivating all plugins except Unyson plugin and WpBakery page builder plugins and see whether everything works fine and then enable the plugins one by one to see which plugin is conflicting if any.
Best regards,
Shufflehound teamI deactivated all the plugins per your suggestion and that didn’t fix the issue.
I changed the MP4 URL to point to a different (and much smaller) video and that didn’t fix the issue. (Note, this caused Chrome to play the new MP4, which tells me MP4 is favored over WebM. Not sure which one is preferable for the theme to pick when both are specified, or if it matters at all.)
I created a new simpler page (see URL in private) with just one section with background video. Same outcome. I tried also putting a video player element in the section/column, but it didn’t generate a video element on the page. Perhaps I did something wrong.
It means this is not a video issue.
We have to find out whether it is a video tag limitation so please add below code in the page text editor and see whether it displays fine.
<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; opacity: 1; width: 1281px; height: auto;"> <source src="https://www.gavant.com/wp-content/uploads/2020/06/19655701-hd.mp4" type="video/mp4"> </video>
Also please test the page using default WordPress theme such as Twenty Twenty to confirm whether it is a theme-specific issue.
I’ve updated the page to have two sections. The first section is the problematic background video. The second section contains an “Output HTML” element with the specified video markup.
On Safari, the second section auto-starts and plays fine, so the problem seems to be limited to the background setup.
Swapping out the theme is a little more complicated. I’m not sure exactly how best to set that test up without disrupting the site.
Have you replicated this simple setup on your side?
I could confirm the issue on your website as you have specified.
Yes, I have replicated the setup on my website but it is on the localhost.
It seems the issue of section element of the Unyson plugin and the plugin team should fix it.
Would you mind if I log in to your site and do quick troubleshooting? If this is ok then could you please temporarily create an admin user account and share me the account login details privately by adding them in the box having text “Enter your private content here (only you and forum moderators will be able to see it)”?
OK, see private. Please let me know when done so I can disable.
I logged into your website and resolved the issue by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-section video { visibility: visible !important; }Could you please check it?
That looks to have resolved it for Safari; however, iPhone still only shows the image. For me, this isn’t that big of a deal, but for the fact that the page load takes a long time, as if it’s trying to download the MP4, all for no benefit. Is there a way to have the background video only play on web and just show image on mobile (or alternatively get it to play)?
One additional question. If I specify both MP4 and WebM URLs, does one get preference over the others or does everything get downloaded?
Thanks.
That looks to have resolved it for Safari; however, iPhone still only shows the image. For me, this isn’t that big of a deal, but for the fact that the page load takes a long time, as if it’s trying to download the MP4, all for no benefit.
I could confirm on the iPhone that both the videos on test page don’t play
Is there a way to have the background video only play on web and just show image on mobile (or alternatively get it to play)?
No, the Unyson plugin does not provide an option to achieve it.
One additional question. If I specify both MP4 and WebM URLs, does one get preference over the others or does everything get downloaded?
The only video format gets downloaded and played which the browser supports so please try adding all the video formats.
