Adding Video File to Hero Image Background
Permalink Browser Info Environment
Good afternoon,
I am trying to add a video as a background element to the Hero image section of that block. Is there a way to edit the code so that the video will "autoplay".
The background video is working in some browsers (i.e. Safari on Mac OS and iOS) but not Google Chrome and Firefox.
Any help would be appreciated.
Sincerely yours,
Paul Hebert
I am trying to add a video as a background element to the Hero image section of that block. Is there a way to edit the code so that the video will "autoplay".
The background video is working in some browsers (i.e. Safari on Mac OS and iOS) but not Google Chrome and Firefox.
Any help would be appreciated.
Sincerely yours,
Paul Hebert
| Type: | Ticket |
|---|---|
| Status: | Archived |
Thanks for looking into this for me David.
I really like the look and styling of this template.
If it doesn't work out because of the browser's standards, do you foresee any issue using an animated PNG?
Best regards,
Paul Hebert
I really like the look and styling of this template.
If it doesn't work out because of the browser's standards, do you foresee any issue using an animated PNG?
Best regards,
Paul Hebert
I have to be honest it's not something I have tested in the hero unit, off the top of my head I cant see a huge problem with using an animated PNG or GIF, but I will also look into that for you if I draw a blank on the video.
Best regards
David
Best regards
David
Thanks again, David.
Your assistance is truly appreciated.
Best regards,
Paul Hebert
Your assistance is truly appreciated.
Best regards,
Paul Hebert
Hi there Paul,
I have had a closer look at this today, and it looks like the autoplay video is a no-go, both Chrome and Firefox changed their autoplay policy and it seems like there is no clean way around it, unfortunately.
I have had a test with an animated PNG this morning and I can confirm it works and works well, a lot better quality than an animated GIF, and it works straight out the box no code alterations required as C5 just recognises it as a PNG.
I think the animated PNG is probably the way to go, I have added a note to the Modena road map to look at adding some video-based options for a hero unit, even if we cant get them autoplaying we may be able to get an elegant compromise.
Sorry I couldn't be of more help on this occasion.
Best regards
David
I have had a closer look at this today, and it looks like the autoplay video is a no-go, both Chrome and Firefox changed their autoplay policy and it seems like there is no clean way around it, unfortunately.
I have had a test with an animated PNG this morning and I can confirm it works and works well, a lot better quality than an animated GIF, and it works straight out the box no code alterations required as C5 just recognises it as a PNG.
I think the animated PNG is probably the way to go, I have added a note to the Modena road map to look at adding some video-based options for a hero unit, even if we cant get them autoplaying we may be able to get an elegant compromise.
Sorry I couldn't be of more help on this occasion.
Best regards
David
Thanks for looking into this for me, David.
I was able to load an Animated PNG and it works fairly well. Not as smooth as a video, but provides a degree of animation that I feel is important.
I greatly appreciate your efforts with this request.
Best regards,
Paul Hebert
I was able to load an Animated PNG and it works fairly well. Not as smooth as a video, but provides a degree of animation that I feel is important.
I greatly appreciate your efforts with this request.
Best regards,
Paul Hebert
Hi David,
Please check the home page of this link:
http://njadclub.org/
I was able to view the background video in Chrome.
If there are any updates to enhance the functionality of the Modena template, please keep me in the loop.
Thanks again.
Please check the home page of this link:
http://njadclub.org/
I was able to view the background video in Chrome.
If there are any updates to enhance the functionality of the Modena template, please keep me in the loop.
Thanks again.
Hi Paul,
Thanks for the link. After having a look at the code powering the video it looks like its basically a youtube embed, they then use Javascript to "press" the play button, when someone opens the page, it's a bit of a hacky solution to be honest, and comes with a fair few drawbacks as listed on their official docs:
https://docs.elementor.com/article/387-section-background-video-opti...
It will only autoplay on mobile "if the device supports it" which currently isn't many if any, as further on they state "Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining." And you don't have any control over the youtube "suggestions" that play after the video ends.
It does play MP4 however, it would be interesting to see how this is handled and may give us some ideas.
we will certainly be looking at video options though in upcoming updates, as it is a nice effect to have. We will certainly keep you in the loop.
Best regards
David
Thanks for the link. After having a look at the code powering the video it looks like its basically a youtube embed, they then use Javascript to "press" the play button, when someone opens the page, it's a bit of a hacky solution to be honest, and comes with a fair few drawbacks as listed on their official docs:
https://docs.elementor.com/article/387-section-background-video-opti...
It will only autoplay on mobile "if the device supports it" which currently isn't many if any, as further on they state "Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining." And you don't have any control over the youtube "suggestions" that play after the video ends.
It does play MP4 however, it would be interesting to see how this is handled and may give us some ideas.
we will certainly be looking at video options though in upcoming updates, as it is a nice effect to have. We will certainly keep you in the loop.
Best regards
David
Hi Paul,
I used this to get a background video on the home page hero section of a site using Modena.
https://www.concrete5.org/marketplace/addons/video-background1...
It needed few CSS tweaks.
The site has not been launched but you can PM me for a link if you want to see it.
Colin
I used this to get a background video on the home page hero section of a site using Modena.
https://www.concrete5.org/marketplace/addons/video-background1...
It needed few CSS tweaks.
The site has not been launched but you can PM me for a link if you want to see it.
Colin
Thanks, Colin.
That solution worked out great. I appreciate your assistance with this.
Best regards,
Paul Hebert
That solution worked out great. I appreciate your assistance with this.
Best regards,
Paul Hebert
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Thanks a lot for your purchase.
As far as I know its no longer possible to autoplay video in Chrome and Firefox, the autoplay policy was changed a couple of years back at a browser level effectively giving the choice to autoplay or not back to the user. Please leave it with me and I will investigate further, and get back to you.
Best regards
David