When I run it in desktop its okay , but when I do inspect element and change to mobile view it doesn't work the autoplay.
iframe src="https://www.youtube.com/embed/vsSQEUSQkIs?autoplay=1" allow='autoplay'>
That is the iframe Im using putting ?autoplay=1 makes it work autoplay to desktop, but not working on mobile.
What about your experience with actual Phones?
In my experience autoplay doesn't work with iOS Safari, however Chrome on an Android phone does seem to work.
I think Safari has some inbuilt prevention for videos autoplaying.
Mobile browsers have been making it harder for videos to autoplay on mobile, to prevent involuntary data use. It's most of two years since the question was asked but it was true even then.
The YouTube Iframe API documentation says:
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
Related
A simple one - here is my site - http://michaelmedvedskiy.website
I'm loading it through the same wifi network, in my pc browser the background video loads fine - pc fullscreen perspective
And if i stretch the screen down to the mobile's perspective it works fine as well - pc stretched perspective
But on my mobile device (Sony Experia X5) it just doesn't load - mobile perspective
Why so?
Hopefully, I wrote the question properly, if I didn't, please remark my flaws, I will correct them.
Background videos are not auto playing on mobile devices. It's default setting. You may try to play manually using player API
I'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program
There is an embedded Vimeo video on a site I'm developing. Nearly all of the target audience uses IE8 or below, and for reasons unknown nearly all of them have their browsers zoomed to 125% view. Thankfully everything else on the site works under those conditions, but the video in the iframe is zooming oddly and cutting off content.
http://imgur.com/a/pg53V
That is an album with the iframe normally and zoomed, as well as the embed code provided by Vimeo. There is absolutely nothing special in my CSS or JS that changes the iframe's default properties. I'm certain I'm not the first one to have this problem, but apparently I just don't know how to ask the question to lord Google. Thanks for your help.
Internet Explorer 8 will automatically zoom to 125% by default if your display settings are set to 120 DPI. This does however sometimes confuse plugins such as Silverlight and Flash. It is possible to detect the zoom level in script and you could potentially use this to make adjustments. See Making the Web Bigger: DPI Scaling and Internet Explorer 8.
I haven't done much debugging on ios safari and I am having a strange issue. I need to play HTML5 video from vimeo. The embed code works as expected. If flash player is not detected then HTML5 video is presented to the user.
On desktop all browsers I turn of flash and works fine. On ios using ipad simulator portrait mode in safari the video plays but once I turn it to landscape and load the page and try to click the video to play nothing happens.
If you go to http://tennlife.com:82/drupal/projects/millcitymuseum and navigate to the 3rd slide on the page you can see what I mean.
What is the best way to debug this type of thing in the simulator if any.
Has anyone run into this type of issue and do you have any suggestions on a solution?
You can turn on the Debugging console in iPad and iPhone - http://maisonbisson.com/blog/post/14447/step-by-step-turn-on-the-iphone-ipads-web-debugging-console/
Also you can use Firebug Lite to inspect the DOM http://getfirebug.com/firebuglite
How to test website compatibility for iPAD without having iPAD , in both condition Portrait and landscape?
on Windows PC
also, there is another web-site: http://ipadpeek.com/
but, if you have a special css file for ipad, this site cannot show it. you should change your main css file with ipad specific one...
also, you can rotate your ipad in ipadpeek.com
edit: there is an app for looking your layout on ios device here.
You'll probably have to use a windows browser to fake the browser-agent header. This page gives more information as well as the browser agent string.
You could use Chris Pederick's User Agent Switcher in Firefox, but you won't get webkit rendering. The best option is probably to use the developer tools in Safari and change the browser agent in the Develop menu.
You should also make sure your screen size matches the iPad (1024x768 if I'm not mistaken). To test landscape, just change the screen size.
What you won't get is multitouch and gesture testing...
What are you actually trying to test? If it's just a website, that should be sufficient.