This question already has answers here:
HTML5 inline video on iPhone vs iPad/Browser
(8 answers)
Closed 6 years ago.
Mobile Safari on the iPhone does not allow videos to play inline, they must always go fullscreen. Is there any way to play html5 video inline?
This is interesting. Why would apple imply limitations to development?
Came across this:
Source: http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/
No way to play video inline on the iPhone
Videos always plays full-screen on the iPhone (as of iOS 4.2), I’m “sure” that it isn’t a technical issue since iAds can play inline videos without any problems and the iAd is simply an embedded UIWebView. – it seems that Apple doesn’t want webapps to succeed since they don’t pay 30% of the sales to them – And don’t say that it is because the user won’t have enough available screen area to watch the video, that it is for a “better experience”, that it “saves battery”.. it is all nonsense, the browser UI don’t need to be so obstructive and in some specific cases it is totally fine to have the video playing on a small area, they are “doing it on purpose” just to push users to the app-based browsing (which they control and profit with).
Related
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."
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
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have made some websites in Photoshop CS5, but I usually tend to just make them raw in notepad++. I normally make them live on the site, and edit the code and refresh the page to see the changes. I am wanting to move to the more professional method and making the entire template/design in photoshop. The thing holding me back from diving right in, is the very very start lol..
What is a good resolution to use for the template? I have came across different tutorials and they have say different sizes. For instance, my laptop resolution is 1366x768. I have a 22in LCD at my office, and I know it is a really large resolution as well. I would assume the min resolution of most monitors is 1024x768...
When creating a new template in Photoshop to create website templates, what size should I make the image and why?
Also, since we are on the topic, do you guys have any links to good resources of image collections and such that you find helps you the most in creating your templates? I am a programmer, and as we all know, most coders suck at images.. I am just trying to strengthen the other half of my brain :)
Thanks in advance!
I would suggest the following course of action:
Take a look at current statistics for the most widely used screen resolutions. As you'll see, 1366x768 is the most popular resolution right now, followed by good old 1024x768 which still has a huge user base. And keep and eye out for mobile resolutions as well.
Factor in the necessary screen real estate taken by browser chrome and other OS fluff.
Since designing for multiple screen sizes is becoming more important every day, I would strongly encourage you to pick a few target resolutions rather than only one. This can all be nicely handled by CSS. Even if you're targeting only desktops, it still makes sense to consider different screen sizes.
Since you're still getting your feet wet with Photoshop, you could start from one of the many grid-based PSD templates available. I know a 960px one and a 1140px one, but you can find many more. You'll probably have to use multiple grids anyway if you decide to support more than one screen size.
And then when you feel like thinking about all this a bit harder, go straight for this article: A tale of two viewports by Peter-Paul Koch.
Look at smashing magazine and sign up for their newsletter as well as webdesignerdepot and check out Codrops.net. They have great freebies, tutorials, and standards updates. I LOVE checking my mail to see them.
As for the PSD - their's no set size. I've seen professional wordpress developers mockup at 1100px wide (height is SO variant based on your layout). I wouldn't recommend much more than 1366px wide.
I might do 1366 or 1440 because that is the resolution most people will see. When you send a mockup at 1920 wide people think the website is too small, when the content is still the 940-980 that they all
Edit:
I myself do PSD's at either at 1100px or 1440px wide and the main content is is always 940-980px wide.
I use 1100 when there isn't much to look at graphically in the body background, and 1440 when the background is more crucial to the "feel" of the website.
You want to design your website for the most used screen resolution which seems to be 1280px by 720px. Therefore that is what you want your width to be, you can create any type of background and just make sure you fade it to one color or transparently and use CSS to change the background color.
Make sure you have guides that help you keep the content inline, best way, create a new document with the width 960-100px and the height 720px, then drag guides to all four sides.
Then you can change document size to 1280px by 800-960px.
The reason why you have a guide at 720px is because everything above that line is guaranteed to be seen on all resolutions, it's called "above the fold". Good designers take this in account for to ensure the audience will be drawn into exploring the site, a featured content slider is an easy way out.
incomepitbull, I understand where you are coming from...
I am also a back end developer who is trying to learn Photoshop..
Many front end designers are ignorant of what goes on on development stage...
Mostly the Photoshop moke up depends on the customer specification...
The height doesn't matter; use 960 px (12col,16col,24col), 980 px (12col,24,col), 1000 px (100 % responsive friendly for those not using grid systems) or 1140 (for webs targeting bigger monitors ie not mobile first px...)
After all, as developers, we fix all this problems; but good mockups are important...
Does anyone know of an open source JS solution to replicate the new "regions" css proposition put forward by Adobe?
I would really like to be able to flow inline content from one region to another for the development of magazine-like responsive layouts. I've found 'columnizing' plugins that create columns without CSS but haven't been able to find anything that flows text from box to box.
First think in terms of what devices are being used the most in 2014 and beyond.
Cellphone - Mainly Portrait Mode
Tablets - Portrait or Landscape Mode
Laptops, PC, TV - Landscape Mode
Responsive design and media queries already cater for most scenarios.
Float text blocks in larger modes but fit the text in the limited screen real estate in cellphones portrait mode.
2 x Columns in cellphones (which dominate already) portrait mode looks awful.
Now css regions are only a spec
It breaks the main rule of separating content from presentation by wanting to flow text through interlinking divs.
My suggestion is stick to responsive design which is supported everywhere already.
Adobe needs to make a lot of changes to expect the W3C to ever support it.
In its current form its completely disruptive to web design and will damage the html5 and css spec irrevocably.
However CSS exclusions (shaping areas) does have some merit (if it works with media queries) and perhaps Adobe and partners will find a workable solution for this feature sometime in the future.
I'm trying to adapt my website for mobiles and by now I'm quite disoriented.
I've got 2 test pages, t3.html and t4.html.
The first one (t3) without header and footer seems to fit ok to screen width in real iPhone and HTC, but not on my Opera Mobile Emulator for Samsung Galaxy or HTC nor on my iPhone (¿3?) emulator.
The second one (t4) with header and footer (which is what I really want to have) makes a big wide for header and footer and keeps a narrow form and tiny fonts for the main content, this happens in real iPhone, HTC and in my Opera Mobile Emulator, not in my Iphone (¿3?) emulator.
The thing is, if I didn't forget any, there aren't any width properties set (except for the form inputs and labels, which are near 200px width) so all divs should span to device's screen width, or that's what I think.
The examples are:
http://s380890671.mialojamiento.es/mobile/t3.html
http://s380890671.mialojamiento.es/mobile/t4.html
My goal is that everthing fits the mobile screen width. Can you help me or point me to a good and up-to-date mobile designing article? The ones I found are a few years old.
Thank you
Smashing Magazine has a great resource on many aspects of mobile web development.
The overview features hand-picked and organized selections on the most useful and popular of Smashing Magazine’s articles related to design and development for mobile devices:
http://www.smashingmagazine.com/guidelines-for-mobile-web-development