WordPress 4 Business

Wiki

Her finder du hjælp, guides, vejledninger, tips, tricks og meget mere både til wp4u og til WordPress generelt. Alle indlæg er skrevet af professionelle udviklere.

 

Brian Andersen

Generel computernørd. Ekspert i HTML, CSS, Javascript, jQuery, SQL, PHP, WordPress, Linux, Cloud teknologier, AI mm. Elsker at lave perfekte systemer 🙂

Video baggrund der virker på mobil

Hermed en lille guide til at lave videobaggrund, der virker på mobil (og alle andre enheder)

Du kan se resultatet her: Demo

Før vi går igang, skal vi have fundet os en video og udregnet videoens aspect ratio, der skal bruges senere. Jeg har taget en fra pexels.com. Videoen har en opløsning på 1920 x 1080 px. Videoen skal være mp4 og kodet til web.

Lad os så komme i  gang…

    1. først laver vi en sektion med Divi’s kodemodul og sætter følgende kode ind:
      <video autoplay loop muted playsinline id="myVideo">
        <source src="rain.mp4" type="video/mp4">
      </video>

      Husk at ændre rain.mp4 til et link til den rigtige video, og fjerne al margin og padding på sektion og række, samt lave rækken til fuld bredde.

      Under “brugerdefineret css” sætter vi vores sektion til at være absolut og i toppen af siden:

      position: absolute;
      top: 0;
    2. Nu har vi en funktionel video, men da vi har sat den til position absolute, fylder den ikke noget på siden. Derfor skal vi oprette endnu en sektion og sørge for at den har samme højde som videoen. Herved presser vi resten af sidens indhold ned under videoen, og vi har samtidig en sektion vi kan skrive henover videoen. For at udregne den relative højde af videoen skal vi bruge videoens opløsning. Heldigt for os skrev vi den ned tidligere. Formlen hedder højde / bredde * 100 og giver i vores tilfælde 56. Det betyder at hvis bredden er 100%, er højden 56% af bredden. Det kan vi skrive ind i vores sektion der ligger over videoen ved at tilføje følgende til sektionens “brugerdefineret css”
      width: 100%;
      height: 56vw;
    3. Nu har vi en videobaggrund der vil automatisk starte afspilning. Det kan være at du skal rode lidt med margin på mobilvisning, hvis Divi sætter menu ind i toppen eller lignende.

BAMÆRK: Hvis Iphone’s er i “battery save mode” vil den ikke afspille videoen, og det er ikke noget vi kan ændre.

Videoen skal komprimeres i det rigtige format, med progressive MP4 codec, og ca. 10 andre vigtige indstillinger jeg ikke kan huske 🙂 Men hvad jeg kan huske er, hvordan man gør det…

  1. Download og installer Handbrake
  2. Tilføj din videofil, og under “Presets” ( står lige under title ) vælger du WEB og et af følgende formater
    “Vimeo Youtube HQ 1080p60” – Bedste kvalitet
    “Vimeo Youtube HQ 720p60” – Middel kvalitet
    “Vimeo Youtube 720p30” – Ok kvalitet
  3. BOOM efter du har trykket Queue og Start Encode går der nogle minutter og din video er klar til nettet…

Sådan er demo’en sat op i Divi Builder:

Videobaggrund på der virker på mobil med Divi

Var denne Wiki nyttig for dig? Hjælp os med at blive bedre… 2 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 52 votes, average: 5,00 out of 5 ( Log ind for at rate )

0 kommentarer

Indsend en kommentar