Title Background Image

thirty bees and Videos, Part 2

Insert moving pictures into product descriptions and blog posts.

Videos everywhere! After looking at embedding portal videos previously, we look into embedding local videos this time. Using local videos doesn’t require user content under European Union legislation.

By Markus “Traumflug” Hitter
Featured Image
Photo by Dominika Roseclay.

Previous part is thirty bees and Videos, Part 1.

Embedding Local Videos

Local Video here means videos stored somewhere on the own server. They can be embedded into any field using HTML, for example product descriptions.

Using local videos doesn’t load content from other servers. This means, private data like their IP address doesn’t get forwarded anywhere. Accordingly, such private data can’t be analysed by other servers. Unless your server does its own visitor analysis, this is allowed by GDPR without explicit user consent. No cookie consent dialog required!

Modern browsers have quite good video players built in, there’s no need for fancy extra software.

Prerequisites

  • A video file, obviously. Which format works best is a science on its own and beyond the scope of this post.
  • Size of this video in pixels (width, height).
  • Optionally a title image. The image shown before the video starts.

Step 1: Place the Video on the Server

Content images go into img/cms/. Maybe it’s a good idea to create a seperate folder for videos. Use your favorite file upload tool to place the file there, typically FTP.

A video in Ubuntu’s file manager

Step 2: Insert HTML Code into the Product Description

As merchants using thirty bess probably know already, one edits product descriptions in back office, at menu -> Catalog -> Products, then one clicks on the product to edit.

Steps there are shown in the next screenshot:

  1. Scroll down to Description and click on Insert/edit video.
  2. Click in the folder icon of the first field of the upcoming dialog.
  3. Find the video in yet another upcoming dialog and click it.
  4. Insert video dimensions, width and height. Check the mark Constrain proportions as needed, it recalculates the second field on change of the first one and makes no distinction on the final result.
  5. Click Ok.
  6. On success, the Description field now shows a video placeholder.

Embedding a video in a product page 1 Embedding a video in a product page 2 Embedding a video in a product page 3 Embedding a video in a product page 4 Embedding a video in a product page 5 Embedding a video in a product page 6

Again, don’t forget to click Save or Save and stay at the bottom of the panel to finish up.

Enjoy the Result!

That’s all! Now one can look up front office, the public shop, and watch the video:

Video on a thirty bees product page

FAQ

Do I have to enable iframes?

Not required, as no iframes are used. Having iframes enabled doesn’t break things either.