Embed a video or youtube clip

Post a video clip on a product page, product group page or custom page.

I have a video clip, can I upload it to the file archive?

Yes, you can upload the video to the file archive but you should always use a streaming service such as YouTube, Vimeo or similar for your videos. If you have filmed something, for example with your mobile phone, and upload the video file directly to the site, visitors will have to download the entire video file before they can watch the clip. This can make the whole store very slow and slow to load. Therefore, you should always upload the video clip to YouTube, for example, and then "embed" the clip from there on your site.

Important to remember

Abicart's themes are responsive, which means that the design adapts to visitors' screen sizes. Usually when you copy an embed code from a streaming service, there is a fixed width and height in the code which means that the video clip will not be responsive. We'll go through further down this page how to make the clip responsive.

Embedding a link from YouTube

Once you've uploaded a video to YouTube, click "Share" below the video:

Then click "Embed" and copy the code:

You paste the link into the article description of the article where the video will appear.

Go to Products -> select product, edit paste the code in the "Description". Save. 

Make a video responsive

A video added to the theme will not automatically adapt to the visitor's screen size. 

Solution:

Embed Responsively is a page that makes your video responsive.

Go to https://embedresponsively.com/ and paste the link from YouTube or Vimeo and click "Embed":




The code that then appears consists of a CSS part and an HTML part that you need to paste in two different places.

The code that is inside <style> and ends with </style> is a CSS code and is pasted into the Style -> Custom CSS of your active theme.

Then copy the HTML code (starting with





Go to Products -> select product, edit -> paste the code "Description".

Embed Youtube as 100% width (16:9)

Add DIV container:

.yt-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
  }

Add class yt-video in to the embedcode in your stylesheet:

  .yt-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }


Example: 

<div class="yt-container"><iframe width="100%" height="100%" class="yt-video" src="https://www.youtube.com/embed/wyw2SCJ1ZSs" allowfullscreen="allowfullscreen"></iframe></div>