I have uploaded both *.MP4 and *.webM format (identical file names, different extensions as per guide). Checked on [windows / chrome / pc] - videos play but when i check on mobile device [ios / chrome / iphone&android mobile device also in chrome] video is not playing / no thumbnail just title/subtitle and black.
so it's a bit frustrating...
Talked with my web-implementer and he's asking for:
1) please let me know where can I change the html attribute of the video element 2)The following attributes should be added : autoplay loop muted playsinline So the video would play on mobile devices as well
It would be much faster if you can pin point where in the code he can change that versus going "line by line"
I also feel that this is a general interest enquiry / perhaps you could fix this bug in a future update / it would make your product better.
Thanks!
Cheers!
PS: if needed, PM me and i'll indicate the URL so u can check for yourself.
It is not recommended, as a general practice, having videos autoplaying on mobile (considering also different data mobile plans and different network streaming speeds). ios devices 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-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_image_section.php line 18
1) only my first video is playing (all other main page "portfolio" entries are static / hero *png is loading instead of webM/mp4 file playing)
2) when i tilt the iphone (7/8/X various firmwares - including latest ios) video isn't playing - only "tilt phone to portrait mode icon appears" - here perhaps the previous code you've replied with could be tweaked?
3) clicking on title to enter sub-page, tried to do a "workaround" with embeded video via "video player" = it isn't loading full page width / same problem in device landscape mode. I also tried to "raw html" + copy paste embeded code generated by vimeo (even tested with&without responsive vs fixed, same with intro/title/byline - all combos)
4) the email icon (paperplane) is loading on the left side of the screen instead of being centered. (on windows/desktop&android the logo becomes "centered" only after i refresh the page - this is also a bug
5) same "after refresh" / 2nd time the page gets loaded the scrolling becomes "only vertical" (as it should), meaning that i can "sidescroll" at first load, then it "locks" to vertical scroll (from what i've understood, "vertical" scroll should be the intended design
On the "infrastructure" side of the story, we can rule out video file size being "too big", because same is happening with 5mb webM/mp4 files both on 1Mbps wifi/5ghz/2.4ghs/5G/4G full signal.
Please keep in mind that these bugs/errors are persistent both on Safari and Chrome.
On a personal note, my target audience for the website's target audience uses 90% ios devices, hence i do have a big problem and it is starting to become frustrating.
Hope you understand that by pointing out these situations i strongly believe that your product / theme could benefit far more people / if you manage to fix these bugs, more people from my side of the visual industry could buy your product.
Try to remove all the mp4 video files. Some are corrupted. Test only with webm. Also consider to optimize videos for web. On ios the loading time is too long which will cause issues and crash. All the videos should not be over 15mb. You have almost 60MB only in video content
Hello again,
I have uploaded both *.MP4 and *.webM format (identical file names, different extensions as per guide). Checked on [windows / chrome / pc] - videos play but when i check on mobile device [ios / chrome / iphone&android mobile device also in chrome] video is not playing / no thumbnail just title/subtitle and black.
so it's a bit frustrating...
Talked with my web-implementer and he's asking for:
1) please let me know where can I change the html attribute of the video element
2)The following attributes should be added : autoplay loop muted playsinline
So the video would play on mobile devices as well
It would be much faster if you can pin point where in the code he can change that versus going "line by line"
I also feel that this is a general interest enquiry / perhaps you could fix this bug in a future update / it would make your product better.
Thanks!
Cheers!
PS: if needed, PM me and i'll indicate the URL so u can check for yourself.
Hi,
It is not recommended, as a general practice, having videos autoplaying on mobile (considering also different data mobile plans and different network streaming speeds). ios devices 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-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_image_section.php line 18
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hello,
On android devices it's working (better) , but on IOS it's terrible.
IOS bugs (tested on ipad pro; iphone 7; iphone 8; iphone X):
1) only my first video is playing (all other main page "portfolio" entries are static / hero *png is loading instead of webM/mp4 file playing)
2) when i tilt the iphone (7/8/X various firmwares - including latest ios) video isn't playing - only "tilt phone to portrait mode icon appears" - here perhaps the previous code you've replied with could be tweaked?
3) clicking on title to enter sub-page, tried to do a "workaround" with embeded video via "video player" = it isn't loading full page width / same problem in device landscape mode. I also tried to "raw html" + copy paste embeded code generated by vimeo (even tested with&without responsive vs fixed, same with intro/title/byline - all combos)
4) the email icon (paperplane) is loading on the left side of the screen instead of being centered. (on windows/desktop&android the logo becomes "centered" only after i refresh the page - this is also a bug
5) same "after refresh" / 2nd time the page gets loaded the scrolling becomes "only vertical" (as it should), meaning that i can "sidescroll" at first load, then it "locks" to vertical scroll (from what i've understood, "vertical" scroll should be the intended design
On the "infrastructure" side of the story, we can rule out video file size being "too big", because same is happening with 5mb webM/mp4 files both on 1Mbps wifi/5ghz/2.4ghs/5G/4G full signal.
Please keep in mind that these bugs/errors are persistent both on Safari and Chrome.
On a personal note, my target audience for the website's target audience uses 90% ios devices, hence i do have a big problem and it is starting to become frustrating.
Hope you understand that by pointing out these situations i strongly believe that your product / theme could benefit far more people / if you manage to fix these bugs, more people from my side of the visual industry could buy your product.
Please, let's make this work ;)
Thanks!
Hi there, I escalated your ticket to our web designer
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
hello,
it's been 2 weeks since you sent out the ticket to your web designer and still no answer.
I will push again your ticket, we appreciate your patience.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Try to remove all the mp4 video files. Some are corrupted. Test only with webm. Also consider to optimize videos for web. On ios the loading time is too long which will cause issues and crash. All the videos should not be over 15mb. You have almost 60MB only in video content
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy