has come to an end. From now on you will find my Web Development articles on

Show content on top of YouTube video

I just ran into the problem that I needed a YouTube video to play in the background and have some other content covering it. Worked fine in all major browsers out of the box but for IE (all versions) you need to add wmode=opaque at the end of the src attribute like that:

Snippet: Smooth scrolling on iOS

Let’s assume you have a container in which you need to scroll. You just set a specific height and width and set it to overflow-y: scroll; No big deal, eh? But if you try to scroll within this container on your iOS device you’ll notice that it doesn’t scroll very smoothly and it doesn’t bounce at the top and end. But you can change this very simply:

.my-container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

Snippet: clearfix

For the longest time I just used a div with the class of clear with just clear: both; but it turns out the following is better and these days the modern way (IE8 and up) to go. You can just apply the class clearfix to any element that has floating stuff inside and needs to be cleared. Works perfect and doesn’t need any additional markup.

.clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;

In case you’re wondering what this confusing syntax is all about, have a look at SASS/SCSS.

Snippet: Styling HTML5 Placeholder

You are using the HTML5 placeholder="Your name" attribute but don’t know how to style it? Here is how you do it:

.my-input::-webkit-input-placeholder {
    color: #555;

.my-input:-moz-placeholder {
    color: #555;

.my-input:-ms-input-placeholder {
    color: #555;

Make sure you don’t comma separate the selectors because browsers stop interpreting the whole list if they don’t understand one selector in it.