I am still an HTML5 rookie and so far I got something up that's pretty snazzy. I found a template over on HTML5UP which I have been tinkering with, changing the CSS and taking out parts I didn't need, as well as added a couple of things myself.
Now, I wanted to show some images in a gallery, which I have achieved. It works pretty good on mobile too. The other thing I wanted to show, was my YouTube channels playlist, embedded using iframe. On the desktop it looks just fine, but on mobile it breaks the site when viewing the page vertically. I would like to know if there is a way to force the iframe to resize because of a phone screen or if I have to maybe go in another direction with this? (Like using the Video and Audio libraries in JavaScript).
If you can give your code that would be helpful, however I believe this is what you are trying to achieve?
Just give your iframe width a percentage instead of a pixel number. However I recommend you change the height as well, as you can see it looks funny at certain widths.
<iframe width="100%" height="315" src="//www.youtube.com/embed/ep7W89I_V_g" frameborder="0" allowfullscreen></iframe>
I also suggest you read the documentation on media queries.
Related
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I have a 16:9 video (1280 × 720 Actual), that I've uploaded to YouTube, and embedded into a WP page, using the HTML5 player embed:
<iframe width="395" height="222" src="//www.youtube.com/embed/XOcDLExisBg?autohide=1&modestbranding=1&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
My embed dimensions are also 16:9 (calculated by YouTube, and verified manually).
When the video plays on the page, I have black borders around three sides:
Does anyone know why that is happening?
Thanks in advance!
ty
I see no way to respond within the rules - sorry - but the answer provided does not account for the fact that this is an issue only viewable in Chrome and that has only been occurring for around 10 days. It is a bug also displayed on Youtube's own pages when viewing Channel Trailers - this is a bug in either Chrome or Youtube. I have reported it with full screenshots and notes to Google.
If you use the following code (no autohide) you will see that the controls autohide anyway, and do not produce the black bar bug. However, the controls are visible on load so it is not as clean a look in terms of a 'poster' but the playback is perfect.
<iframe width="640" height="360" src="//www.youtube.com/embed/YOUTUBE_VIDEO_ID?rel=0&showinfo=0&theme=light&color=white" frameborder="0" ></iframe>
Has to be a bug - this behaviour was not happening just over a week ago.
The autohide=1 parameter causes the player bar to scroll offscreen when it's not being used, but the space is still there reserved for it, it does not resize the video to take over the space it was sitting in. Thus, the black bar area at the bottom is for the hidden player bar, and the side space is for the reduced size of the video.
You either need to take the player bar into account, or stop using autohide=1.
Changing autohide=1 to autohide=0 is doing the job for me. I have no idea why this is working, but for me the player bar is hidden like before. The good thing is, it works on Chrome AND all the other browsers.
I think this bug is from YouTube itself. We might need to change everything back to autohide=1 once they fix it. You still need to change everything, but like you guys mentioned, if you need to fix it because of clients getting annoyed, this could be a short term fix.
Hope it helps!
I have been so frantic with the iframe codes that I didn't check the others.
This works:
<embed width="640" height="360" wmode="window" allowfullscreen="true"
type="application/x-shockwave-flash"
src="http://www.youtube.com/v/YOUTUBE_VIDEO_ID&showsearch=0&fs=1&autohide=1&showinf
o=0&rel=0&autoplay=0&theme=light&color=white&ap=%2526fmt
%3D22"></embed>
So, it's a Youtube/Chrome bug that is only affecting iframe embeds. There may be some stuff in that code you/we don't need - but it works 100% and I'm not spending another second on it!
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.