How to embed Shopify self-hosted videos in product descriptions?

Shopify Discussion
1

Hi,

I’ve been looking to solve this issue for weeks now but I cannot seem to find a solid solution…

Anyway, I’m trying to embed a Shopify self-hosted video into my product description.

Is there somebody who can help me out here? There is no official documentation that I found about this. Only docs on how to add videos to your product gallery, but I want the videos in the container of my product description.

I found numerous of different embed codes people wrote, but isn’t there a general Shopify html5 video embed code for this?

Thanks a lot for helping me out.

2

There is no Shopify html5 video embed code but this should not be too hard.

  1. Upload your video into your files folder: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads

  2. Copy the generated upload URL.

  3. Go to your product, in the rich text editor click on the “Show HTML” (last icon on the right). You will see the HTML code

  4. Try to make sense on what is there… and paste a video element with the uploaded URL:

Have a look at the Video element to understand the syntax: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

3

Well, I’m using this code right now but I thought there was some generic from Shopify.

I guess the code I’m using is OK than…

4

Belated, but here’s what I did (adding in case helpful to someone) to add a self-hosted video to a blog post (so, should work for product description area, as well)

I added the following to the bottom of my theme.scss.liquid file (to ensure video would resize responsively)

/* embed video */
.embed-video {
    position: relative;
    padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */
    /* padding-bottom: 62.5%; - 16:10 aspect ratio */
    /* padding-bottom: 75%; - 4:3 aspect ratio */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

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

Then I uploaded the video and video poster to Settings > Files and copied the URLs to add to the following code, which I then added where I wanted the video to appear using the code editor, replacing “VIDEO-URL-here” with the URL of the uploaded-to-Shopify video and “video-CARD-URL-here” with the URL of the uploaded-to-Shopify poster image that I wanted visitors to see before they press “play”