Video background [EN]

Forget large background image for your web site. Now, comes video time.

So you want to put a nice video as background of your site but don’t know how to do ? “Fear you must not” said Yoda as it’s really simple.

First, have a look at the effect in action. Nice, isn’t it ?

First thing first, the html :

<video src="your-video.mp4"></video>
<div> your fantastic text here </div>

Now, the css magic :

video {
  z-index: -999;
  position: fixed;
  min-height: 100%;
  min-width: 100%;

The z-index indicates that the video layer is in the background. Everything with a higher index will appear above.

The position fixed is mandatory, to make sure the overlay plays well.

Finally, ensure that the video dimension takes all space available, with the min height and width tags to 100%.

If you would like to have your text centered horizontally and vertically, just add this css :

html, body { width: 100%; height: 100%; }
body {display:table;}
div {display: table-cell; vertical-align: middle; text-align: center;}

And that’s all !

This method works on all major browser : I tested it on Firefox, Chrome and Safari. It also works unmodified on IE9 !

2048 Gremlins [EN]

2048 le jeu

Do you know Gabriele Cirulli ? He is the 2048 game creator : a very famous game where you have to slide the numbered tiles to join same numbers, and cumulate them to obtain 2048 !

Now, do you know Gremlins.js ? A Javascript library made by Marmelab to brute force test web application : it’s like releasing on your app thousand gremlins clicking every where, typing non-sense input on keyboard, so they may detect breaches in your app.

Ok, so I mixed the two of them, and I get 2048Gremlins ! It’s like letting the gremlins play 2048 !

Disclaimer !

  • quick and dirty code here. I just wanted to show it’s possible 🙂
  • only for Firefox : sorry for webkits engine (chrome, safari, …) but keyboard simulation does only work in Firefox (until someone points me to the solution for webkit 🙂 )
  • Gremlins are bad at 2048 🙂 random isn’t a good strategy to access high scores 🙂

It was fun to hack those wonderfull projects and it made me learn more things about gremlins.js.