Webudvikling med WooCommerce

Ja, det kan man godt.

Herunder er et produkt med en video i, der forklarer, hvordan man laver et produkt med en video i. Hvis det her var et digt, så ville man tale om et metadigt.

Indsæt medie fra URL
Du kan evt. indsætte videoen som en url ved at trykke på “Tilføj Medier”. Her kan du kopiere linket fra YouTube-videoen. Det indsætter også en video. Den er nogenlunde respsonsiv. Denne metode er nok den “officielle” måde at gøre det på.

Her har jeg erstattet “Procuct Summary” med “Product Description”. Så får man en længere tekst med videoen.

Og når kode kan lægges ind på denne måde, så kan man også lægge noget script ind.

Kan man selv sætte HTML ind?
Ja, det kan man også. Og det åbner unægteligt for nogen muligheder.

“Code is Poetry”

Responsiv CSS
Jeg har fx det problem, at videoen ikke tilpasser sig størrelsen i første omgang; så det kræver lidt CSS-magi:

<style>
/* Responsive styles */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

/* Video containeren */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

</style>

<div class="video-container">

<!-- iframe fra YouTube. Fjern width og height.  -->
<iframe title="YouTube video player" src="https://www.youtube.com/embed/wS7oqbvv2lc?si=ZTKKoAIBZ0ctko77" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

</div>

Så med lidt CSS troddom og @media-regler burde man kunne lave noget fornuftigt her.

NB: Fjern width og height fra iframen
Iframen fra YouTube anvender oprindeligt en width og height, og det skal fjernes.

“The game’s afoot Watson!”

Sherlock Holmes

Kan man lægge en video ind i en produktbeskrivelse?

YouTube
På YouTube: klik på del, og hent koden til en iframe. Skriv evt. hvor videoen skal starte, hvis man ikke skal de den fra begyndelsen.

WooCommerce

• Åbn fanebladet “kode” i “Varebeskrivelse”.
• Indsæt iframe-koden fra YouTube.
• Klik på “Visuel”
• Nu kan du se videoen

Herefter kan du lave produktbeskrivelser med videoer i.

Kategori: Elektronik, Garagesalg