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

Prestashop 1.4.2.5

Finally the Prestahop team launched version 1.4.2.5 (Stable)

Here is the "Prestashop changlelog" for the newest version of Prestahop

Download from Prestashop.com

I will give the new version a try at my WAMP-server at the office. But the new version seems very interesting.

Best Regards

Peder

Youtube and Socialmedia (English)

Some have asked me about how i put embedded YouTube-clips and the social media logos in right column.

I installed the Google Ad-sense module and instead of using it for Ad-sense i am using it for my own embedded video clips and links to my different places in social-media (Twitter, Blogger, YouTube-Chanel  and Facebook).


1. Install the Google Ad sense module

2. Choose Configure

3. In the window where you should put the Adsense code i put my own code instead (basic-HTML) and the embed code from YouTube in the right dimensions for column right.

4. Go to positions and make a hook of the module to the right column.

5. Finished

As you can see i have in the right column two embedded YouTube clips and four different logos with a standard href-link to the different URL:s.

Best Regards

Peder

Youtube och Socialmedia

Jag har fått lite frågor ibland kring Prestashop och hur jag lagt in youtube klipp och Facebook, Blogger samt twitter i högerfältet på butiken (right column).

Det har jag gjort genom att jag använda mig av en modul som egentligen är tänkt för Adsense (Google-annonsering) i sin butik.Däremot förstår jag inte varför man som butiksägare skulle vilja ha annonser som kan leda eventuella kunder till konkurrenter.

1. Se till att ni har en Adsense modul installerad under modules

2. Välj konfiguera

3 . Skriv in koden i rutan där egentligen Adsense-koden skulle ligga

4. Skapa en hook (position) i mitt fall "Right Column blocks"

5. Svårare än så var det inte!

Dom båda inbädda You-tube klippen samt Twitter, Facebook, Youtube-kanal samt Blogger ligger nu i högerfältet. Dom olika småbilderna har jag laddat upp genom ftp och det ända som krävs är lite enkla html-kunskaper.

Med vänliga hälsningar

Peder Molin

Prestashop - Open source

Hej alla,

Mitt namn är Peder Molin och driver butiken http://www.handlavin.se under Prestashop. Här kan ni följa mina tips och råd kring ehandelsplattformen Prestashop. Prestashop bygger på opensource och du behöver inte sätta dig på dyra kostander utan det räcker med lite datorkunnande inom webb och ett webhotell.

Det finns även ett svensk företag Prestaworks som har specialiserat sig på denna plattform och från en hundralapp i månaden så kan du få en ehandelslösning.