I use Facebook video embeds on my site, for videos that have both 1:1 and 16:9 dimensions. The dimensions are correct on desktop but on mobile devices the 1:1 square dimension videos are always inside of a 16:9 iframe with black bars on the side. I'd like it to print as square on mobile devices, like the videos do on the Facebook mobile app.
Is there a way to have a 1:1 square video on mobile web?
This is the code I'm working with.
<div class="video__wrapper js-video__wrapper fb-video"
data-allowfullscreen="1"
data-width="640"
data-height="640"
data-href="{url}"
style="height: 640px; min-height: 640px; width: 640px;">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="{url}">
</blockquote>
</div>
Related
Im trying to finalize this website, and somewhere during the time i was tidying up the code i messed up how the background looks on the ipad and iphone. It looks fine on all other browsers including the native android. theres a slight bug on firefox but im working that out now.
Website in question: http://morzi.com/constantine/
The bio page has a link to an ipad css but just ignore that i was just fooling around trying to fix the issue.
Thanks!
I'm not sure where to begin, and I'm not sure what software you are using to code this but it's definitely not hand coded :s.
Anyways, your CSS is really screwed up.
Three solutions:
Hand code the CSS and in this case you can play around with the background position which will align the background with the content, then you can redesign the picture to see the person on the left.
background-position:top center;
Restructure your HTML and CSS to have the website work in compartments:
|aside|article|aside|
<aside id='left'></aside>
<article></article>
<aside id='right'></aside>
<style>
aside#right,
aside#left {
width:5%;
}
article {
width:90%;
margin:0 auto;//centers the div
}
</style>
Create a media type for mobile devices with specific width like so
#media only screen and (max-device-width: 480px) {//Iphone and below
//css for mobile device
}
#media only screen and (max-device-width: 768px) {//Ipad and below
//css for mobile device
}
I hope this helps and good luck to you :D
http://www.execairshare.com/about-us/testimonials
Has anyone had problems with loading a youtube video in shadowbox and being unable to view it on iphone? On other mobile devices it works fine but on the iphone it just shows a blank black box. I am assuming it is a flash thing?
<a href="http://www.youtube.com/v/Mf5Mpd1LIgM" rel="shadowbox:width=680;height=480">
<img src="//i4.ytimg.com/vi/Mf5Mpd1LIgM/default.jpg" alt="Thumbnail">
</a>
Your linking to a Flash version of the Youtube video. Since iPhone has no flash it doesn't work.
You'll need to link to HTML5 version of the video.
Try adding '?html5=1'
<a href="http://www.youtube.com/v/Mf5Mpd1LIgM?html5=1" rel="shadowbox:width=680;height=480">
<img src="//i4.ytimg.com/vi/Mf5Mpd1LIgM/default.jpg" alt="Thumbnail">
</a>
I am developing my first iphone HTML+CSS+JS and i am experimenting some problems,
First, i am confused; It's same resolution in iPhone 3 and iPhone 4?
Because i'm testing here and i see things really small with my iphone 4
I setted a body min-width: 320px and that doesn't even used 25% of screen,
What CSS layout/dimension you suggest???
For now i just have
body
{
width: 100%; height:100%;
font-family: "helvetica";
min-height:640px; min-wdith:320px;
background:#000;
}
But images with width of 100px really look very small...
Can I separate .CSS for iphone 3 and iphone 4??
The iPhone browser defaults to a width of 960 pixels (I think) and scales the screen to fit on the smaller screen of the iPhone.
To fix that, set the viewport in the head section:
<meta name=”viewport” content=”width=device-width” />
I'm building a mobile version for a website, and i'm having some problems...
The main page of this mobile website is basically an image i made myself with this dimensions:
width: 320px;
height: 480px;
So, this in a normal pc browser is displayed with that dimensions... but in the iphone the image appears in the top left corner with a very small size at the eyes of the user... I'm using width:100%; in the css
This is the first time i'm making a mobile website, so any help would be appreciated!
Thanks
try using this meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
I want to have a webview that has a single HTML and a single CSS file, shows graphics at the same size, but native resolution for each.
My existing webviews, designed for 320x480 seems to scaled up well (crisp text and border-radius for instance), though images are at half res in the iPhone4 simulator. How do I simulate the native image loading behaviour where a graphic or it's double res version is chosen automatically with HTML, CSS, or JS? (hopefully not JS)
I'm currently using a viewport declaration like so:
<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' />
This zooms out and image pixels are 1:1 with display pixels, but it also scales down everything else. And of course makes it tiny on the smaller iPhone display.
I have a feeling this has something to do with some sort of viewport size media query?
This will load a specific stylesheet for iPhone 4:
<link
rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>
I stumbled on this the other day: http://aralbalkan.com/3331
This will load an iPhone 4 stylesheet
<link
rel="stylesheet"
type="text/css"
href="/css/retina.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>
Then in your low res stylesheet the magic move is to set your background size property to the size of the low res image.
.demoImage
{
background-image: url(../images/my-image-64.png);
background-size: 64px 64px;
background-repeat: no-repeat;
}
Now in retina.css simply show the double res version
.demoImage
{
background-image: url(../images/my-image-128.png);
}
Now the css background image will display a 128x128 image as if it was 64 css pixels providing a 1:1 image pixel to display pixel image display on an iPhone 4.
I'm having the same problem. I haven't got the time to work on it, but my idea is to create graphics with a higher pixels per inch and use those for both iphone 3g(s) and iphone 4.
Not sure if that's going to work tho. But worth a shot.
A CSS media query should work:
#media only screen and (min-resolution: 300dpi) { ... }
Also, A List Apart offers a technique to consider for serving high-res images. The article is mainly about print styles, but applies here just as well.