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