Responsive videos in product descriptions

The youtube embed code should be wrapped in a div with special styling e.g.

<div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/KwQwQS2qdfQ"
    frameborder="0"
    allowfullscreen>
</iframe>
</div>

If you use the Ecwid video embed button, or paste the embed code into the HTML, videos are embedded at a fixed size (e.g. width 500px)

Here is a technique to have the video fill the width available and be responsive. The video will resize on smaller screens and keep the aspect ratio correct.

You will need to use the HTML editor for the product description and chnage the video embed code. To use html mode, click on the <> icon in the top right of the product description editor.

In the example, I have removed the width and height form the embed code iframe, then added style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"

This is then wrapped in a div with style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;"

The 56.25% is the aspect ratio of the video (16:9 in this case - 9 / 16 = 0.5625).

The above will be responsive, fill the width of the tab, and keep the video aspect ratio correct as it re-sizes.

Centering the video

Embed a video that is centered and occupies 80% of the available width:

<div>
<div style="width:80%; margin:0 auto; position: relative; padding-bottom: 45%; padding-top: 25px; height: 0;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/KwQwQS2qdfQ"
    frameborder="0"
    allowfullscreen>
</iframe>
</div>
</div>

If you want the video to be centered and not fill the width, set the containing div width to be say 80% with auto left and right margins. i.e. in the div style, add width:80%; margin:0 auto;

As the video is now only 80% of the width available, the aspect ratio needs adjusting to 45% (56.25% * 80% i.e. .5625 * .8 = .45), so change the padding-bottom to 45% Now wrap the whole thing in another div.

If you need a simpler way to do this, there is another way using JavaScript that is explained near the end of this article. It is more complicated to set up, but once done, videos may be added easily without bothering with the edits describved above. That may be a better solution for clients who may need a simpler way to add responsive videos.