Embed with background CSS (English)

In my Presta-store i embed a lot of YouTube videos that i produce. I thought it was a lite bit boring with the ordinary embedding methods and ill found on CSS-tricks.com some information about how to embed your videos inside a nice graphical-frame.

Im not working as a programer, but this was my solution for embed YouTube with a CSS-background on my homepage, maybe you find a better solution.

This is my embedded video before:

This is after:

I use the editorial module for mostly of my YouTube videos and first of all ill addes this code in /themes/prestashop/css/modules/editorial/editorial.css

#youtube_zone {
    width: 700px;
    height: 334px;
    margin: 0 auto;
    padding-left: 66px;
    padding-top: 39px;
    background-image: url("http://www.handlavin.se/img/youtube-background.jpg");
    background-repeat: no-repeat;

  Inside the folder root/img is the graphical border youtube-background.jpg

in the editorial HTML-editor ill add following before the embedding-code from YouTube.

<div id="youtube_zone"> 

Click here to see the image in full-resolution: 

I'm using  firebug in Firefox and you have to adjust the jpg-image after your embedding size and do some adjustments in padding, width and height for your site. More information is found on http://css-tricks.com/49-spice-up-embedded-youtube-videos-with-background-css/ where ill get the CSS-code. 

Tip of the day: I always add following code in my YouTube embedding-code:

&amp;rel=0

So my visitors doesn't after the video get YouTube recommendations and start watching the tube instead of exploring my wine-shop. At Google Code you can find more player-parameters that you maybe will add.

http://code.google.com/apis/youtube/player_parameters.html  

Best Regards

Peder Molin

http://www.handlavin.se

Also thanks to Daniel at Prestaworks.se that gave me some help where to put the CSS-code.