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.

Bädda in dina videos snyggt

Jag vill först av allt säga att jag är långt ifrån en programmerare. Men för att hålla kostnaderna nere i min vinbutik så arbetar jag själv med att göra om Prestashops standard-tema och även andra funktioner på egen hand. Jag drömmer om den dagen jag kan anlita Sveriges bästa AD:s och få en faktura på posten.

Inte för att jag inte tycker att det är roligt och jag lär mig faktiskt massor. Men jag är ingen designer och ibland blir det därefter.


När man bäddar in YouTube-klipp på hemsidan brukar kan det ibland se ganska livlöst ut och jag ville skapa en ram kring det inbäddade videoklippet.

Så här såg det inbäddade klippet ut innan på handlavin.se

Och efteråt blev resultatet en fin gul ram som går hand i hand med färgerna i mitt tema.

Detta löste jag i mitt fall på följande sätt, men det finns säkert ännu bättre idéer. Filen editorial.css som ligger i katalogen /themes/prestashop/css/modules/editorial la jag till följande kod:



#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;

Under katalogen /img ligger den grafiska-ramen som är en jpg-bild

Sedan är det bara att i HTML-editorn använda följande kod innan inbäddningskoden från YouTube.

<div id="youtube_zone">

Klicka här för att öppna bilden och se den i större format:

Det kan behövs justeras i CSS-koden efter dina behov, storlek, mått etc. och man bör ha Firebug installerat på datorn och ha lite kunnande kring hemsidor. Tips och idéen kom ifrån CSS-tricks.com

http://css-tricks.com/49-spice-up-embedded-youtube-videos-with-background-css/.

Tack även till Daniel på Prestaworks som gav mig lite tips om var jag kunde lägga in CSS-koden.

Med vänliga hälsningar

Peder Molin
Handlavin.se

Bädda in youtube-klipp

Handlavin.se använder sig mycket av YouTube eftersom jag har ett förflutet inom både television och webbtv och trots mitt stora intresse för goda viner så älskar jag även teknik.

Däremot i slutet av en YouTube film dyker det alltid upp förslag på andra klipp man kan tänkas titta på. Vad som kan hända däremot är att besökaren slutar intressera sig för din butik och börjar titta på roliga klipp istället. 

Man kan kringgå detta genom att lägga till följande kod i inbäddningskoden.

&amp;rel=0 (tar bort förslag på andra videoklipp)

Jag har även personligen valt att ta bort titeln i överkant på videoklippet, genom följande kod. 

&showinfo=0 (för att ta bort title-bar i youtube)

Nedan kan ni se hur jag har använt följande kod på handlavin.se:

Detta är något som många butiker missar när dom lägger in produkt-videos etc. och det är ett ganska säkert kort att kunna tappa kunder, eftersom Youtube både kan vara fängslande och underhållande.

Besöker man Google Code så hittar man fler funktioner i samband med inbäddning.
http://code.google.com/apis/youtube/player_parameters.html

Med vänliga hälsningar

Peder Molin

 http://www.handlavin.se