I'm using Revolution Slider in WordPress and I'm running into an issue where on mobile devices, I cannot unmute YouTube videos. I have videos in the slider to be muted on load in and to autoplay. I have interaction and controls both allowed. However, when I try to click the unmute button on the screen, it simply pauses/plays the video. I'm not sure if the pause/play button that appears somehow overlaps and the YT controls are underneath or something. It actually doesn't look like the controls generated from YouTube but instead the RS native controls. I tried turning controls and interaction both off but unsurprisingly, this causes absolutely zero action to happen when you click/press on the video, not even pause/play it.
You can view the issue in action at http://www.hagentertainment.com. The slide in issue is slide #2 out of 3.
Being an issue related to mobile and iframes makes it relatively difficult to diagnose with 100% efficacy. I used Browerstack to open a connection on a Galaxy S20 and noticed the issue as you described.
Using the Dev Tools, I was able to get it to allow the mute button to be clicked by changing the &enablejsapi=1 to &enablejsapi=0. You can see in this screenshot below that after doing that, it allowed it to be clicked. You also have a JavaScript parse error showing in the console - that could potentially be preventing a JS API controller (built into Revolution Slider?) from functioning correctly.
So it looks like your options (for the moment) are to fix that JS error and see if it works, or disable the JS API in the url of the videos
Related
I'm implementing Facebook Pixel on my WordPress website. Everything works fine on the desktop. The pixel is activated is and working fine.
I installed the Facebook Pixel Helper plug in for Chrome, and it detects the pixel on my page
I test the events by opening my website on desktop browser, the page view event is detected on the dashboard. The pixel can also detect other events I set, like contact, content view, etc. All works fine.
Problem: when I open my website from mobile browser (I tried mobile Chrome, Kiwi Browser, Samsung Browser), the dashboard didn't detect the page view event, as well as other events. I tried to open from another mobile phones, same result. I tried to deactivate all my WordPress plug-in to check if one of them is conflicting, but still same result. I inspected my website from mobile browser, it has the Facebook pixel script on the header part, just like on desktop browser, so it should be working fine.
Anyone knows the solution? I don't know what causes this problem. I use Hestia theme and Elementor for my WordPress website.
Try this steps:
1 ° Mobile usually has cache (I don't think so), but try to clear the caches and try again.
2 ° If there are cache plugins please clear all caches please (I don't think so)
3 ° Some themes are available in several headers and some of them are different for mobile and desktop, check if the headers are different and insert the tag manually if necessary in each header.
4 ° To check if everything is ok, with google chrome if you press f12 you have the option to choose a device for testing. Choose an Android or IOS phone from the emulators and reload the screen to test. In cell phones can be false / positive information received sometimes.
Try these options and update your question with new information to try to help you.
Is there a way to let PWA users know that a clicked link is being loaded. Usually in the browser we see the blue progress line indicating this but in the pwa the user is left to assume the page is loading except there is a pseudo effect on the buttons programmed by the developer. I understand the idea behind pwa includes giving users immersive visuals and if pages load faster, the users will not bother about the blue line but sometimes it's needed.
Going through the same thing but i think i found a way.
We can use bootstrap spinners to animate this. We can use javascript to detect a link click and show the spinner. We can also add this on submit button click.
Meteor now support mobile apps. That's great. However, I find that the app running as a mobile app is not the same as running in a mobile browser.
When it runs as a mobile app, if the user wants to input to a text field, a soft keyboard shows up. Then, after the user finishes and click the button (at that point, the soft keyboard is still shown), the app brings to another page. However, the new page renders as if the soft keyboard still exists so the lower portion of the screen is blank. The elements that are rendered to a fixed position (like footer) still shows up at the bottom though. Even though the lower portion of the screen is blank, the elements are still there. If I tap the blank portion, and if there is a link or button in the place I tap, the app still brings me to the new page. Since I use Meteor and ratchet, I don't know which one is the issue.
I suspect the issue is that when the user clicks the button, the Meteor renders the new page immediately, but the soft keyboard get hidden afterwords.
This situation doesn't happen when the meteor app runs in a mobile browser, however.
I use meteor, iron-router, and ratchet. The issue is identified in an android 4.X device. Any idea how to fix the mobile app specific issue? Thanks.
PS. If I delay firing the page transition by a second, I don't have the issue. So my suspicion is correct that the page transition happens before the keyboard is hidden.
I'm building a contact form for a mobile website in HTML5 and CSS. It is the same form I use on all mobile website and after not working for 5 hours I pulled the code straight from a working site I built and it still doesn't work properly.
The issue is when you go to the contact page it shows the contact form, but with the labels centered and the submit button image isn't showing up. I must refresh for it to bring up the correct CSS file to align the text left and show the submit button. Initially I thought it was from a CSS/JS conflict with my menu at the top so I pulled that and it still causes the same problem. I have cleared the cashe on my phone and web browsers and they all work the same.
Here is the link: www.lpokc.org/mobi/contact.php after going to this page hit refresh and you will see the difference.
My question is, is this a caching issue, is it server side issue, or is it a conflict in my coding. I'm not good with posting the code on this site but if you go to the mobile site from your web browser you can just right click and view source to see my code. I have a boiler plate html core file with boiler plate CSS and custom CSS.
Is there some sort of script I could use to make this page auto refresh one time on page load then not again after the reload? I don't want to use an improper fix like this but I have been working on this issue for a day.
The left side is before refresh. I have pulled the code from the site now but I think it was a js conflict because it was auto loading the css from the menu when the link for any page was clicked.
I'm seeing it fine on my end. Seems to work flawlessly, but if you are still having a problem, you could either use cookie or session variables. If the variable does not exist, you can use the php function header( 'Location: http://www.lpokc.org/mobi/contact.php' ) ; to "refresh" the page. It's actually just a redirect command, but if you are sending them back to the page they are on, it is pretty much the same thing as a refresh.
It was a conflicting issue with my menu JS/CSS. I pulled it and now everything works fine.
I am using FB like button in Joomla. This is the address of my website http://www.kaefiggefluester.de.
For fb-like button, I am using custom html module with fb social plugin code and then loading it in user4 position which i defined in the template myself.
Now there are three different problems that I am facing.
In IE 9, before the fb-like button loads, it displays a white line. It disappears after the button is loaded. I am not facing this problem in Firefox.
Also, when loading the page in IE, it sometimes distorts the page. I know that one posts said that I should look for any script that distorts tag, however i face this problem only if I have facebook plugin enabled. IF I remove the fb-like code from Custom Joomla module, it works fine.
I have a component from Videoflow. I dont know exactly how it works but fb-like button doesnt work on the sampe page as this component. However it is working in IE but with wrong language. That is, my defined language for the button is DE (German) and so in rest of the pages it displays "Gefaellt mir." However, In KG TV it shows "Like." ... So this suggest that there is something wrong with loading of the script. However, this is happening in IE only. In firefox it is not loading at all.
If you think i should share some code, please let me know because there are so many files and I dont know which to share.
Regards
I suggest installing firebug for Firefox or using the Chrome equivalent to help you during the development of your website. You can then use the console to view if there are any problems. For example currently your website has these problems which might be the reason you are having the issues you mentioned: