I've encountered an enigma in the behavior of my website. Here's the situation. The site has loaded properly and I navigate to another page. Then I hit the "HOME" button on the dropdown menu, the full homepage doesn't reload. The slider at the top is always missing.
It's the revslider that does not display when ajax page transitions are enabled.
Ajax page transitions will load the target page content container within the original page. Since the target page is not loaded normally the <head> and <body> elements will stay the same.
Since a lot of plugins are using javascript initialisation in the head (or the footer) of the page they don't get called in the target page.
So you should disable ajax page transitions or use one of our sliders.
once you added it into your page send us wp admin access with full rights using Appearance -> Editor so we can see about the autoplay, loop and slide duration
What if I wanted to have a video playing in the background instead of a slider?
I have it setup now, but the the video also doesn't load on mobile.
I'm also worried the the size of the file is slowing down the page load speed. I had my guy compress the video, but I was wondering if it would be possible to use a youtube video in the same way that you do the "cover overlay" block
this is an individual portfolio item page setup with video hero.
1. the format for this video is .webm and .mp4 as descrivbed in the specs for HTML5 <video> tag. so no youtube or vimeo videos for hero section.
2. removing the audio track from the file will reduce its size therefore will improve the streaming speed. the autoplay will work only with muted videos due to autoplay policy implemented in most browsers.
You should keep .webm and .mp4 formats but try using data compression tools to reduce the size of video files without degrading image quality.
3. video hero section on mobile devices: 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). You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
- add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
- 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.
Hey
I've encountered an enigma in the behavior of my website. Here's the situation. The site has loaded properly and I navigate to another page. Then I hit the "HOME" button on the dropdown menu, the full homepage doesn't reload. The slider at the top is always missing.
Can you help?
Cheers
Hi Eric,
It's the revslider that does not display when ajax page transitions are enabled.
Ajax page transitions will load the target page content container within the original page. Since the target page is not loaded normally the <head> and <body> elements will stay the same.
Since a lot of plugins are using javascript initialisation in the head (or the footer) of the page they don't get called in the target page.
So you should disable ajax page transitions or use one of our sliders.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Thanks,
Then I would prefer to use one of your sliders.
Can you provide me with some of the common css language to make the image slider:
Autoplay
Loop
Format the slide duration
Format to wide or fullscreen
Anything else you think would be important.
Hi Eric
you can chose between normal slider
http://clapat.ro/themes/munio-wordpress/munio_portfolio/particle/
and carousel slider
http://clapat.ro/themes/munio-wordpress/munio_portfolio/color-dust/
once you added it into your page send us wp admin access with full rights using Appearance -> Editor so we can see about the autoplay, loop and slide duration
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
What if I wanted to have a video playing in the background instead of a slider?
I have it setup now, but the the video also doesn't load on mobile.
I'm also worried the the size of the file is slowing down the page load speed. I had my guy compress the video, but I was wondering if it would be possible to use a youtube video in the same way that you do the "cover overlay" block
www.ericadlerclothing.com
Hi, to clarify:
you can have something like this:
http://clapat.ro/themes/munio-wordpress/munio_portfolio/dance/
this is an individual portfolio item page setup with video hero.
1. the format for this video is .webm and .mp4 as descrivbed in the specs for HTML5 <video> tag. so no youtube or vimeo videos for hero section.
2. removing the audio track from the file will reduce its size therefore will improve the streaming speed. the autoplay will work only with muted videos due to autoplay policy implemented in most browsers.
You should keep .webm and .mp4 formats but try using data compression tools to reduce the size of video files without degrading image quality.
3. video hero section on mobile devices: 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). You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
- add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
- 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.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio