I included a header background video on this page on my website https://amsterdamwinds.nl/free-wind-tenor-saxophone/ When using Safari the header is grey when I access the page for the first time (first time means after starting up Safari) and does not play. Also the header image - which I set for mobile devices than cannot play videos, does not appear.. When pressing reload the video works, also when I visit the page first and then return form another page on my site the video does play, so it only doesn't work the first time.
I have uploaded the video in the required 3 different formats (.webM, .mp4 and .ovg). I tested it on my MacBook Pro. I use the latest updated software, also WP and Theme Salient are updated to the latest versions. But also on an upgraded old but still working 2009 iMac the same thing happens. On Chrome it works fine. The problem occurs in different network situations.
In regards to the issue, the cause of the video not loading is due to mixed content error. since you site uses https. the video urls are loading via http.
I am afraid my last message was a bit too soon, the problem is still there :(.. I have installed easy ssl, but apparently this did not solve the issue... Any ideas?
Sorry to bother... I checked this morning, now the video still doesn't load.... I have cleared chache. No idea.. again, I have to visit the page for a second time or do a reload before the video starts...
Did you pass the Video convertors as the File size is really big and therefore takes a while to load. The Video elements in the Salient Theme are meant to be used as Design elements only so small repetitive videos would work best .
The thing is that the video only plays after a reload of the page in Safari, all the setting are correct, could this be caused by the video file size? (17MB)
I just made the page Public and it seems to be loading the video on first load. Also noticed you are using the Hummingbird plugin, could you try adjusting these options and check .
I had the same problem with the background video on my homepage (I also made a ticket about this), this also could not be solved but in the end I included a Youtube video as background video in the table row. Unfortunately external videos, such as YouTube or Vimeo cannot be used as header background. Could this perhaps be made possible?
If the direct URL to the video plays when accessed, the server side issue can indeed be ruled out.
I tried to check your URL on Safari a handful of times, but have not been able to see the issue occur yet to start troubleshooting. Could you let me know the browser version you're using on your end?
Also, for testing purposes, could you add this into the custom css box located in the Salient options panel > general settings > css/script related tab and let me know if it changes the behavior you're seeing on your end:
#page-header-bg .nectar-video-wrap video {
opacity: 1!important;
}
Thanks. The strange thing about this is that is happens sometimes... And it happens when I am on different Wifi/LAN networks. On my 2018 15" MacBook Pro I use the latest version of MacOS and Safari, but it also occurred on an ancient 2009 upgraded iMac at home running El Capitan (and the corresponding Safari version, I will check the exact version later). Let me wait until it happens again tomorrow, I will then insert the css, and see what happens, I will keep you updated.
This morning I had the same problem again - background header video is grey. I then inserted the css code (
#page-header-bg .nectar-video-wrap video { opacity: 1!important;
}
)and the video showed up. I then repeatedly added and removed the code. Without the code the video did work after I refreshed the page a couple of times (several reloads always worked before), but before showing the grey screen showed up for a second or so before the video showed. As if the browser is sometimes hanging in the grey screen before showing the video. With the added css the video immediately showed up. So, very hopeful, but let me check today and tomorrow in different situations. I'll get back to you!
Salient has a fade in animation when the HTML triggers that it's ready to play, the CSS snippet I provided was to remove that and force the video to always show, even before the browser thinks its able to play. Since that didn't change anything for you, it can also be ruled out.
I checked your page URL again in Safari and watched the network tab inside the developer tools to see the video loading in real time (see attached image).
I noticed that in some page loads, the video showed the gray background for up to 5 seconds before playing the video. It appears that in Safari, the entire video is waiting to finishing downloading before playing as opposed to playing immediately and downloading as it is playing. This has been documented to occur in Safari when the video itself is not encoded properly: https://iandevlin.com/blog/2011/03/html5/how-to-get-your-html5-mp4-video-file-to-play-before-being-fully-downloaded/
Thanks for the explanation. I must admit that I did not convert the .mp4 file, I directly uploaded the .mp4 file iMovie generated, sorry... That could well be it.
I am sorry but the issue is still there, sometimes a grey screen, sometimes not.. I does not depend on the network situation, it happens with cable LAN and strong wifi signals. I think I will use a header background image instead of a video unless you have any other ideas??
I believe this is a server side issue. As in sometimes when the server has less load it appears correctly and at times when its busy it gives a delay .
I don't think it is a server related issue since the video always works when I directly access it, also it always works with Chrome so I do think it has something to do with Safari and the theme....
As mentioned by the Developer This is a Safari issue so will have to be lived with.
Salient has a fade in animation when the HTML triggers that it's ready to play, the CSS snippet I provided was to remove that and force the video to always show, even before the browser thinks its able to play. Since that didn't change anything for you, it can also be ruled out.
I checked your page URL again in Safari and watched the network tab inside the developer tools to see the video loading in real time (see attached image).
I noticed that in some page loads, the video showed the gray background for up to 5 seconds before playing the video. It appears that in Safari, the entire video is waiting to finishing downloading before playing as opposed to playing immediately and downloading as it is playing. This has been documented to occur in Safari when the video itself is not encoded properly: https://iandevlin.com/blog/2011/03/html5/how-to-get-your-html5-mp4-video-file-to-play-before-being-fully-downloaded/
Hi,
I included a header background video on this page on my website https://amsterdamwinds.nl/free-wind-tenor-saxophone/ When using Safari the header is grey when I access the page for the first time (first time means after starting up Safari) and does not play. Also the header image - which I set for mobile devices than cannot play videos, does not appear.. When pressing reload the video works, also when I visit the page first and then return form another page on my site the video does play, so it only doesn't work the first time.
I have uploaded the video in the required 3 different formats (.webM, .mp4 and .ovg). I tested it on my MacBook Pro. I use the latest updated software, also WP and Theme Salient are updated to the latest versions. But also on an upgraded old but still working 2009 iMac the same thing happens. On Chrome it works fine. The problem occurs in different network situations.
Hi there,
In regards to the issue, the cause of the video not loading is due to mixed content error. since you site uses https. the video urls are loading via http.
To correct the issue you need to update the video url to use https or use this plugin to fix mixed content issue https://wordpress.org/plugins/really-simple-ssl/
Hope this helps.
Hi Andrew,
Thanks, I changed the links on the edit section to the videos from http to https, this seems to work.
By, the way, this could also be the solution with a previous issue that I had with a video background in a table row on my home page.
Thanks!
Hi there,
Glad that helps. We can close the ticket if all other issues are cleared.
Cheers.
Please see updated comment...
Yes, ticket can be closed.
Thanks!
Friso
Hi Andrew,
I am afraid my last message was a bit too soon, the problem is still there :(.. I have installed easy ssl, but apparently this did not solve the issue... Any ideas?
The link in to the videos in the WP Media library are still http, see attachment. Could this have something to do with it?
Hi Friso,
Could you check the last solution in the following link.
https://wordpress.org/support/topic/my-media-library-files-url-http-wrong-should-be-https/
Hope this helps.
Hi Friso,
Could you try removing and re-uploading the images again.
Thanks.
Hi Friso,
The following plugin seems to have fixed the issue.
https://wordpress.org/plugins/ssl-insecure-content-fixer/
Thanks.
Hi Andrew,
This seems to work.
Thanks!
Friso
Hi Andrew,
Sorry to bother... I checked this morning, now the video still doesn't load.... I have cleared chache. No idea.. again, I have to visit the page for a second time or do a reload before the video starts...
Friso
Hey Again,
Try viewing the site in Browser Incognito mode https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DDesktop&hl=en .
Best
ThemeNectar Support Team
Hi Tahir,
thanks, but the problems only occurs with Safari, Chrome works fine. I tried incognito mode, this works too, but Chrome already worked.
Best,
Friso
Hey Again,
Yes Safari uses Webm so you need to add the video url to the correct format fields .
Best
ThemeNectar Support Team
I uploaded the video as .mp4, .webm and .ovg format, that is not the problem I think.
Hey Again,
Did you pass the Video convertors as the File size is really big and therefore takes a while to load. The Video elements in the Salient Theme are meant to be used as Design elements only so small repetitive videos would work best .
Please have a look at this Article :Troubleshooting Video Backgrounds
Best
ThemeNectar Support Team
The thing is that the video only plays after a reload of the page in Safari, all the setting are correct, could this be caused by the video file size? (17MB)
And if the size of the video is the issue, why does it work with Chrome and not with Safari? It puzzles me...
Hey Again,
Did you pass the Video Through the online convertors ? .Gonna escalate this ticket to the developer so he may add in a response.
Best
ThemeNectar Support Team
Hey Again,
I just made the page Public and it seems to be loading the video on first load. Also noticed you are using the Hummingbird plugin, could you try adjusting these options and check .
Best
ThemeNectar Support Team
Hi Tahir,
It seems to work now, did you change anything?
Best,
Friso
Must be a caching issue. Please check cache expiry options in the plugin settings.
Best
ThemeNectar Support Team
Hi Tahir,
The problem still occurs sometimes and sometimes not.. It when the cache plugin is deactivated...
Best,
Friso
I had the same problem with the background video on my homepage (I also made a ticket about this), this also could not be solved but in the end I included a Youtube video as background video in the table row. Unfortunately external videos, such as YouTube or Vimeo cannot be used as header background. Could this perhaps be made possible?
Best,
Friso
Hey Again,
- Some servers do not support streaming videos so this could be a server side issue as well.
- At the moment its not possible to use Youtube or Vimeo though have noted it in the wishlist.
Best
ThemeNectar Support Team
Hi Tahir,
I bookmarked the direct link to the video (https://amsterdamwinds.nl/content/uploads/2020/04/BGTS04.mp4), this always plays, also when the video in the header background does not. Doesn't that exclude server side issues?
Gonna escalate this to the developer as this might be a new issue .
Best
ThemeNectar Support Team
ok thanks!
Hey Friso,
If the direct URL to the video plays when accessed, the server side issue can indeed be ruled out.
I tried to check your URL on Safari a handful of times, but have not been able to see the issue occur yet to start troubleshooting. Could you let me know the browser version you're using on your end?
Also, for testing purposes, could you add this into the custom css box located in the Salient options panel > general settings > css/script related tab and let me know if it changes the behavior you're seeing on your end:
#page-header-bg .nectar-video-wrap video { opacity: 1!important; }Thanks in advance
Hey,
Thanks. The strange thing about this is that is happens sometimes... And it happens when I am on different Wifi/LAN networks. On my 2018 15" MacBook Pro I use the latest version of MacOS and Safari, but it also occurred on an ancient 2009 upgraded iMac at home running El Capitan (and the corresponding Safari version, I will check the exact version later). Let me wait until it happens again tomorrow, I will then insert the css, and see what happens, I will keep you updated.
This morning I had the same problem again - background header video is grey. I then inserted the css code (
#page-header-bg .nectar-video-wrap video { opacity: 1!important; })and the video showed up. I then repeatedly added and removed the code. Without the code the video did work after I refreshed the page a couple of times (several reloads always worked before), but before showing the grey screen showed up for a second or so before the video showed. As if the browser is sometimes hanging in the grey screen before showing the video. With the added css the video immediately showed up. So, very hopeful, but let me check today and tomorrow in different situations. I'll get back to you!
PS Any idea why the css code would work?
Sorry... Problem is back....
Hey,
Salient has a fade in animation when the HTML triggers that it's ready to play, the CSS snippet I provided was to remove that and force the video to always show, even before the browser thinks its able to play. Since that didn't change anything for you, it can also be ruled out.
I checked your page URL again in Safari and watched the network tab inside the developer tools to see the video loading in real time (see attached image).
I noticed that in some page loads, the video showed the gray background for up to 5 seconds before playing the video. It appears that in Safari, the entire video is waiting to finishing downloading before playing as opposed to playing immediately and downloading as it is playing. This has been documented to occur in Safari when the video itself is not encoded properly: https://iandevlin.com/blog/2011/03/html5/how-to-get-your-html5-mp4-video-file-to-play-before-being-fully-downloaded/
Can you confirm that you did previously run the video through the encoder that Tahir mentioned: https://video.online-convert.com/convert-to-mp4 ?
Hey,
Thanks for the explanation. I must admit that I did not convert the .mp4 file, I directly uploaded the .mp4 file iMovie generated, sorry... That could well be it.
test
I am sorry but the issue is still there, sometimes a grey screen, sometimes not.. I does not depend on the network situation, it happens with cable LAN and strong wifi signals. I think I will use a header background image instead of a video unless you have any other ideas??
Actually it worked perfectly before the latest Salient update this weekend, could that have something to do with it??
Hey Again,
Did you update the bundled plugins as well ?.
Thanks
ThemeNectar Support Team
Hey Tahir,
Updated the plugins and cleared cache with WP fastest cache plugin, all made no difference :(...
Hey Again,
I believe this is a server side issue. As in sometimes when the server has less load it appears correctly and at times when its busy it gives a delay .
At this point i am afraid we cant do much .
Best .
ThemeNectar Support Team
Hi Tahir,
I don't think it is a server related issue since the video always works when I directly access it, also it always works with Chrome so I do think it has something to do with Safari and the theme....
Hey Again,
As mentioned by the Developer This is a Safari issue so will have to be lived with.
Salient has a fade in animation when the HTML triggers that it's ready to play, the CSS snippet I provided was to remove that and force the video to always show, even before the browser thinks its able to play. Since that didn't change anything for you, it can also be ruled out.
I checked your page URL again in Safari and watched the network tab inside the developer tools to see the video loading in real time (see attached image).
I noticed that in some page loads, the video showed the gray background for up to 5 seconds before playing the video. It appears that in Safari, the entire video is waiting to finishing downloading before playing as opposed to playing immediately and downloading as it is playing. This has been documented to occur in Safari when the video itself is not encoded properly: https://iandevlin.com/blog/2011/03/html5/how-to-get-your-html5-mp4-video-file-to-play-before-being-fully-downloaded/
Can you confirm that you did previously run the video through the encoder that Tahir mentioned: https://video.online-convert.com/convert-to-mp4 ?
ATTACHED FILES:
Screen Shot 2020-04-16 at 12.07.14 PM.png
Thanks
ThemeNectar Support Team