Could you please guide me on what code to change so that that videos autoplay on mobile please? (I'm using this theme as a portfolio that includes video work which people will access the link via mobile so it's crucial the video autoplays please).
It's primarily the portfolio hero video I need to autoplay on mobile and then also the option to have videos autoplay that shows the project work further down the page.
Videos autoplaying on mobile are not recommended (considering different data mobile plans and different networks streaming speeds). Also, ios devices interpret HTML 5 videos as videos without player therefore they will embed it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options. 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/core/js/common.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 /sections/hero_section_container.php and change the following line
That's amazing thank you so much - the hero videos now play on mobile. You're the best thanks!
Sorry to be a pain but how do I also make the video autoplay on mobile for:
1. Portfolio Item images that appear in Spaced Metro page
2. Video that autoplays in the actual portfolio project page. I'm looking to show project work through a mixture of video and stills. Here is an example of what I mean - https://justified.studio/work/svea-solar (video that autoplays with no controls visible)
We can implement it for a fee but you may find it expensive in which case(since we are very tight with time) we can give you several guidelines on what and how to change
om /js/scripts.js you will find two events handlers for the metro grid page template for mousenter and mouseleave over .item-parallax that represents actually the grid thumbnail
In it, you will a function playpause that you can use to start playing automatically following the model of $('.video-wrapper').on('click', function() { a bit down the file.
Hi - thanks so much for the reply. I don't have any javascript knowledge (only minimal html / css) so I'm struggling a little bit with the below. Tried to get it working over the weekend but couldn't figure it out.
/js/scripts.js - I copied in exactly as you suggested
/core/js/common.js - this I am struggling with, would you be able to tell me what to paste exactly in the code please?
Again really appreciate your help and patience in advance.
Hi, I just installed the theme and it works perfectly! I have a question related to this thread. Is there a way to make the video source on mobile different from the normal one? On mobile, most of the content is cut off, so I would like to recreate the video with a different focus and aspect ratio to be played on mobile.
Hi Hope you're well.
Could you please guide me on what code to change so that that videos autoplay on mobile please? (I'm using this theme as a portfolio that includes video work which people will access the link via mobile so it's crucial the video autoplays please).
It's primarily the portfolio hero video I need to autoplay on mobile and then also the option to have videos autoplay that shows the project work further down the page.
Thanks in advance for you help
Hi,
Videos autoplaying on mobile are not recommended (considering different data mobile plans and different networks streaming speeds). Also, ios devices interpret HTML 5 videos as videos without player therefore they will embed it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options. 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/core/js/common.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 /sections/hero_section_container.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline autoplay class="bgvid">
Hard refresh the content (Ctrl+F5) before testing
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
That's amazing thank you so much - the hero videos now play on mobile. You're the best thanks!
Sorry to be a pain but how do I also make the video autoplay on mobile for:
1. Portfolio Item images that appear in Spaced Metro page
2. Video that autoplays in the actual portfolio project page. I'm looking to show project work through a mixture of video and stills. Here is an example of what I mean - https://justified.studio/work/svea-solar (video that autoplays with no controls visible)
Really appreciate all your help thank you
Hello Dominique
Both of them are custom work
We can implement it for a fee but you may find it expensive in which case(since we are very tight with time) we can give you several guidelines on what and how to change
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
Hi - totally appreciate you are tight with time, the guidelines on what and how to change would be amazing, thank you so much in advance.
Hello Dominique,
om /js/scripts.js you will find two events handlers for the metro grid page template for mousenter and mouseleave over .item-parallax that represents actually the grid thumbnail
https://prnt.sc/huseG42EIERR
I'm thinking you can remive those and in turn replace those with a code that enumerates all elements of type .item-parallax and make them play:
$this.closest('.item').find('video').each(function() {
$(this).get(0).play();
});
where $this is the enumerated element
for self hosted videos, the function responsible for the player can be found in /core/js/common.js, function PlayVideo
https://prnt.sc/YkiAuc12hS5I
In it, you will a function playpause that you can use to start playing automatically following the model of $('.video-wrapper').on('click', function() { a bit down the file.
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
Hi - thanks so much for the reply. I don't have any javascript knowledge (only minimal html / css) so I'm struggling a little bit with the below. Tried to get it working over the weekend but couldn't figure it out.
/js/scripts.js - I copied in exactly as you suggested
/core/js/common.js - this I am struggling with, would you be able to tell me what to paste exactly in the code please?
Again really appreciate your help and patience in advance.
Thanks,
Dom
in /core/js/common.js you need to start the video autiplaying following the model in
$('.video-wrapper').on('click', function() {
where it handles the click event on the video, starting playing or pausing if it is playing.
https://prnt.sc/Hf9HDq-zhooG
Requires some js knowledge.
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
Hi, I just installed the theme and it works perfectly! I have a question related to this thread. Is there a way to make the video source on mobile different from the normal one? On mobile, most of the content is cut off, so I would like to recreate the video with a different focus and aspect ratio to be played on mobile.
Hmm, only with custom work that involves two different video URL options for mobile and then using wp_is_mobile() to differentiate
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