Placeholder services for everyone!

Here comes my list of the best online placeholder services. Thanks to @kosmar and @paulchrablass!

1. Highly customizable: cambelt

http://cambelt.co/

cambelt

<img src="ttp://cambelt.co/200x150/Cambelt?color=234653,eeeeee&font_size=24">

Options: format, text, color, size, font-size, text-color, font-family, https, icons

2. Fit and proper by categories: lorempixel

http://lorempixel.com/

lorempixel

<img src="http://lorempixel.com/200/150/city/2/lorempixel" width="200" height="150">

Options: color/greystyle, size, category, image number, text

3. Fit and proper by tags: flickholdr

http://www.flickholdr.com/

flickholdr

 <img src="http:://www.flickholdr.com/200/150/berlin/4">

Options: size, tag, image number

4. The quick and simple way: placehold.it

http://placehold.it/

placehold.it

<img src="http://placehold.it/200x150.png/cccccc/333333&text=placehold.it">

Options: format, text, color, size

5. For dog lovers at random: placedog

http://placedog.com/

placedog.com

<img src="http://placedog.com/200/150" >

Options: color/greystyle, size

6. For cat lovers: placekitten

http://placekitten.com/

placekitten.com

<img src="http://placekitten.com/200/150" >

Options: color/greystyle, size

7. For cute puppy lovers: placepupy

http://placepuppy.it/

placepuppy.it

<img src="http://placepuppy.it/200/150&n=2" >

Options: size, image number, text, text-bg-color, text-color

To be continued!

Responsive youtube or vimeo content

Today it’s very easy to embed some youtube or vimeo content into your website. Just copy and paste the embed code in your HTML files or CMS editor. This works well for static pages, because you can define your custom video dimensions.

But this is not suffient for responsive websites and, if you just define the iframe max-width: 100% by CSS, you still have a problem with the height. The solution is a wrapper around the iframe:

<div class="video-container">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0" allowfullscreen></iframe>
</div>

and just a simple basic CSS:

.video-container {
  position: relative;
  padding-bottom: 56,25%;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The video-container has a fluid width and height. The height defines the ratio 16:9. If you need 4:3 just set the padding-bottom: 75%.

If you can’t wrap the iframe content in your editor, or if you have a lot of old content, it’s possible to add the wrapper with jQuery:

$jQuery('iframe[src*="youtube"], iframe[src*="vimeo"]').wrap('<div class="video-container">');

This works for youtube and vimeo content.

Logo for Human Rights

At present there is no internationally recognized symbol for human rights. The “Logo for Human Rights” initiative wants to change that!

My work was the implementation of the layout designed by Kosmar. You can still have a look to all submissions and informations about the initiative here:  http://humanrightslogo.net/