ISSUE
Background video of a div on the homepage of my website was playing fine on Firefox & IE but not on google chrome. At the outset, it seemed liked a caching issue so I cleared the cookies and the cache and it did work, but only on some computers. On others, it still didn't!!
The error from the console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin
('http://example.com').
UPDATE & FIX (Specific to Elementor Pro Page Builder - Wordpress)
The error on Chrome's console pointed towards the source of the video (YouTube - on https) and the destination (my test server - on http), to be the issue. I changed that too.
And while I was doing this, I also happened to notice an unexpected css class attached to the container of the video. This particular class 'elementor-invisible' was making the container invisible. Setting it to visible seems to have solved my issue.
I also changed the YouTube video url from https to http since that too was another suspect.
Things look good now.
Related
Facing ERR_CERT_COMMON_NAME_INVALID, while loading css and js files in chrome browser.
While loading login.aspx page related css and js files are loading in IE and Mozilla where as in chrome its not loading. We have deployed the existing application in new server, same application is working on different server. Is there any configuration to be modified in IIS? I have verified both the environment which looks identical, any specific related configuration is helpful. please find the screen shot below
Screen shot
ERR_CERT_COMMON_NAME_INVALID is a very popular SSL error during loading the website. In most cases, the issue is due to certificate misconfiguration on a server. However, it may appear due to antivirus and firewall or aother third-party extensions. so you can try the following methods to solve the problem.
Check date and time are proper
Your Chrome browser will show ERR_CERT_COMMON_NAME_INVALID error in case the date and time are wrong on your computer or mobile device. Please recheck and adjust it on your via PC settings.
Check browser extensions
In some cases, the problematic browser extension could be a reason for the error. First of all, try to open the website in Incognito window and if that solves the issue then no need to check extensions. Otherwise, follow the next steps:
1.Click the "three dots" button on the top right corner of your browser window
2.Select More tools and Extensions
3.Turn off extensions one by one to find culprit extension and delete it to fix the browser error.
Check Installed SSL certificate
In Chrome, you have to click to the "Not Secure" button located on the left side of the address bar, and then click to "Certificate". There you will see the details of SSL certificate using the field "issued to".
Clear the SSL cache
The browser's SSL cache can be an issue. You have to try clearing the cache to resolve the error. click "Three dots" button on the top right side of the browser, find the "Settings". There you will find "Advanced settings" at the bottom of a page. Now find "Open Proxy Settings" and there you will see the "Content" tab with "Clear SSL state"
I built and host the website https://www.kunstwinder.com, I used Wordpress and the theme Enfold(latest v4.2) to build it, and I was hosting it in AWS (EC2).
Recently, I moved the website to a Kubernetes cluster running on Google Cloud. Everything is fine but for the video that plays in the background in the main page, for some reason that stopped working. For reference, I am using the docker image wordpress:4.9.0-php7.1-apache and the latest Kubernetes version (v1.8.3-gke.0). I have been debugging the issue for days, and I can't find a solution.
At first, I thought the issue must be related to the change in hosting, but after going through the nginx (used as reverse proxy) and kubernetes config I haven't found anything. The most puzzling part is that if you access the video directly on https://www.kunstwinder.com/wp-content/uploads/2017/11/CarbonFiberRed_NoAudio_converted.mp4 it will work. I've also tried downloading it with cURL and although the speeds are not stellar, they are definitely enough to load that video while it's playing. In my opinion this points to an issue in either the front-end or the browser.
I have tried in multiple browsers and devices, and the problem presents in all of them. Checking the website for HTML errors with tools online, throws a few warnings and errors, but nothing major. Other videos in https://www.kunstwinder.com/videos that are not in autoplay work without a problem.
I read that Chrome stopped auto playing videos with sound, but this one has no audio either. If you have suggestions or ideas as to why this is happening, please send them my way.
Looking at the page source there is only one video tag on the above page and it does not include the autoplay attribute:
</div><video class="avia_video" controls id="player_12_811126710_1300552843" > <source src="https://www.kunstwinder.com/wp-content/uploads/2017/11/CarbonFiberRed_NoAudio_converted.mp4" type="video/mp4" /></video>
Note you generally need to specify 'autoplay' and 'muted' to get the maximum possibility of autoplay at this time (the rules change from time to time).
Its also worth being aware that browsers may provide the ability for the user to override any autoplay instructions, via the browser settings or configuration.
I have been fighting with this problem since some weeks, and after all the researches...., I think I need your help.
It's about my website: shoother.net
It seems to work fine with Safari, but if you use Firefox and Chrome, the icons wont show up. Just scroll down the home page until the last section "Get Connected" or in the about or contact-page.
The problem started while I was trying to solve CDN issues. I wanted to make my pictures load faster, and moved wp-content/upload-content in the main root. Everything worked perfectly first (I even minified the JavaScript files), but then the icons won't load anymore.
I wrote to the theme-support about it, and they told me that I need to enable CORS with some codes (putting it in .htaccess).
I tried a lot to solve this problem. Chrome always responds with
"Font from origin 'http://content.shoother.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxxxxx' is therefore not allowed access."
.... I really hope you guys can help me.
Regards,
Natts
When I try to hit my test webpage, I get a 503 error.
In the browser tab, the icon associated with my page. However, when I use Chrome Developer Tools, I don't see how that image is appearing.
I cleared my cache prior to hitting the page. Also, I had looked at the HTML and Network tabs, but do not see how the file is getting retrieved.
It is still an issue. See here. It has been pushed off for some time.
I have a browser compatibilty problem with https? I have SSL installed and is in usage. Until today morning, my https part is working well. From then, Https is shown as https(with slashed in red color) saying the page has some insecure content.
I have not changed any code and suddenly i see this problem in chrome. In IE 8, i see the same problem but on every page, it shows me a popup if i should allow to opne secure and non secure or just secure. Firefox has no issues . It shows correct https without any problem. I am fed up with it searching all over. Why is this happenening for me in Chrome and IE 8.
Could someone tell me what the problem is and what can be done to solve it!
PS: I have also checked if the page source is any different when IE8 showed with and without secure data. Everything is the same. but viewstateID was different. Is that something that is creating this problem?
Thanks a lot in advance.
This is usually caused by having the absolute path to a resource specified somewhere on the page without having https specified, eg:
<img src="http://someurl.com/image.png">
If it's a link to something on your site, use https: or a relative path.
DO you have any 3:rd party javascript included, like google analytics or other that might have changed.
If you try with Firefox there is firebug you can add as an addon.
In there is a tab for network (net).
It lists everything the page loads.
In that list you should be able to find anything that gets loaded without https.
IE (correctly) complains when there is mixed http/https content as a security warning. Most other browsers do not typically complain when dealing with mixed content so your source is very likely the same in both instances.
I would second David Mårtensson's answer and say the issue is likely a third party library (google or MS hosted JQuery for example) or static asset server.