1. 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:
A. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
B. 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.
C. go to showcase-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
1.home page hero background video is not playing in mobile
2. need to have different font size of hero title for mobile and pc
3. how to speed up the site its slowing after the video is uploaded
Hello
1. 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:
A. add
@media only screen and (max-width: 1024px){ .hero-video-wrapper { display: block; visibility: visible; }
}
in customizer -> additional CSS
B. 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.
C. go to showcase-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
2. you can use
.slide-title {
font-size: 80px;
line-height: 90px;
font-weight: 600;
}
to change the font attributes on PC and with a media query
@media only screen and (max-width: 767px){
.slide-title {
font-size: 40px;
line-height: 50px;
}
}
@media only screen and (max-width: 1024px){
.slide-title {
font-size: 60px;
line-height: 50px;
}
}
on two different mobile resolutions. Change the values in pixels and add the code in customizer -> additional CSS
3. have you tried to store/publish the video on a cdn network?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi, thanks for the reply,how to store it in CDN?
about this part
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_section_container.php line 51
should take of the entire line replace it with it , whats the exact format?
Hi,
sorry, it's line 42
https://prnt.sc/1ditxl0
in /sections/hero_section_container.php
CDN - you need to find a provide of Content Delivery Network server that will store your video files.
In addition here are some hints on how to optimize the speed of your site:
https://clapat.ticksy.com/article/8082
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Okay got it thanks
can i update wordpress 5.8 does it cause any problem to the theme?
We did not encounter any problem with wordpress 5.8 so far. Should you have any plz don't hesitate to report it.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy