I have purchased the Rayden Theme. my concern is when I use video as background like on the hoe page of : www.icepuff.fr it s perfect on desktop, but on iphone and ipad it doenst show anything. It just shows a black background. I have attached the 2 screenshots.
Can you please tell me how to fix this ? It is pretty urgent Thank you for your support. Lucas
It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width(); if (viewportWidth < 1024) { $('.hero-video-wrapper').remove(); }
hard refresh the page (Ctrl+F5) when you are done.
3. go to showcase-sticky-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_section_container.php line 51
Thank you for you answers. We will try this with our developper. I would suggest you put this issue clearly on the theme forrest page. To be honnest my client have selected this template after seeing the demo with video background.
True, however you can see in our demo too that video does not play on mobile. It's not reaaly the standard to have the videos autoplaying on mobile for the reasons I mentioned earlier.
Hello,
I have purchased the Rayden Theme.
my concern is when I use video as background like on the hoe page of :
www.icepuff.fr
it s perfect on desktop, but on iphone and ipad it doenst show anything. It just shows a black background.
I have attached the 2 screenshots.
Can you please tell me how to fix this ?
It is pretty urgent
Thank you for your support.
Lucas
Hello Lucas,
It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){ .hero-video-wrapper { display: block; visibility: visible; }
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width(); if (viewportWidth < 1024) { $('.hero-video-wrapper').remove(); }
hard refresh the page (Ctrl+F5) when you are done.
3. go to showcase-sticky-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_section_container.php line 51
Hard refresh the pages (Ctrl+F5) before testing
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Thank you for you answers.
We will try this with our developper.
I would suggest you put this issue clearly on the theme forrest page.
To be honnest my client have selected this template after seeing the demo with video background.
The video background was the selling point
True, however you can see in our demo too that video does not play on mobile. It's not reaaly the standard to have the videos autoplaying on mobile for the reasons I mentioned earlier.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
thank you for your reply.
Can you please explain me where is the poster image for mobile you mention ?
Thank you
Hello Lucas,
it's actually the hero image for the respective portfolio item which will serve as poster image.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy