PHP Hosts

We’ve pointed out in the past that if you’re “buying” ebooks on devices like the Kindle or the iPad, it’s important to remember that you’re not really “buying” the books, and you don’t really own them. We’re seeing that once again with a story on Consumerist about a woman who was locked out of the ebooks on her Kindle for a month:

A month ago I bought a kindle and was really excited to use it on vacation. I bought a few books and when I was done, I bought another. Then they froze my account, so I called in and logged a case.

Within 48 hours I got a call back, saying it was an error on their side and they’d unfreeze it for me, but I’d just need to re-order the book. I thought no problem, thanks for the help. So I bought the book a second time and it automatically freezes me out again. I call in and log another case, but get no phone call back as promised from an account specialist.

This apparently has gone on for four weeks, involving approximately 20 phone calls and emails… and still no solution from Amazon. Anyone know of any case where the same thing happened with a physical book?

Permalink | Comments | Email This Story





&partnerID=167&key=segment"/> .8626,cat.TechBiz
.rss"/>

From Techdirt

I saw that Andy Clarke had added a fluid width YouTube video to href="http://lookingforyogi.com/writing/about/no-smarter-than-the-average-bear/">a particular page on one of his sites. His code relies upon a wrapping div and then images and video within this wrapper are set to the width of the wrapper:

.img img, .img object, img embed {
   width: 100%;
}

I love the idea. It’s essentially the classic technique for dealing with images in fluid width designs. Andy’s code sets max-width to 100% here too, but since the width is already 100% that doesn’t matter. Max-width works best by itself. So it can scale down images which could be larger than the wrapper, but not scale them up if they are smaller. For video, scaling up is probably fine. I’d suggest this change:

.img img {
   max-width: 100%;
}
.img object, img embed {
   width: 100%;
}

That will scales images only down if needed, and videos up or down.

Keeping Aspect Ratios

With images, as long as there isn’t an inline “height” setting, the aspect radio will be maintained in a fluid width environment even when you only alter the width. With video (flash or otherwise) this is not the case. If we want to maintain aspect ratio while the video grows and shrinks in width, we’re going to need JavaScript.

Example YouTube Provided Code:

<object width="640" height="385">
	<param name="movie" value="http://www.youtube.com/v/EWsWFjO9MlE?fs=1&amp;hl=en_US"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>

	<embed src="http://www.youtube.com/v/EWsWFjO9MlE?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

This is the plan:

1. Find original aspect ratio by dividing original height by width
2. When window is resized…
3. Measure width of parent
4. Set width of video to width of parent
5. Set height of video to width multiplied by aspect ratio
6. Trigger a fake resize on pageload to ensure video fits right away

Here, we’re using jQuery. Take note that we are target both the class name of .youtube and the embed within that class name. This is presupposing that we are adding a classname of .youtube to the object in the copy-and-paste code YouTube provides. Feel free to adjust the selectors as you wish. You may wish to target all objects themselves, or use a special wrapper. Here we’re using the #page-wrap of all the content to measure width.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script>
	var $origVideo = $(".youtube, .youtube embed");
	var aspectRatio = $origVideo.attr("height") / $origVideo.attr("width");

	$(window).resize(function() {
		var wrapWidth = $("#page-wrap").width();
		$origVideo
			.width(wrapWidth)
			.height(wrapWidth * aspectRatio);
	}).trigger("resize");
</script>

Also of note here is that we are targeting the <object>s and the <embed>s within them with this JavaScript. Targeting the objects alone will work in modern browsers. Including the embed is fine for modern browsers and makes it work with Internet Explorer as well.

Bonus Trick

You can get rounded corners on your YouTube videos! The only luck I’ve had so far is in Google Chrome (7.0.503.0 dev).

1. Add this param to your embed (within the object) <embed wmode="opaque" ...
2. Then you can add border radius to the object

   object {
   	border-radius: 10px;
   }