[TIP] How to add responsive videos to product descriptions and other HTML fields

[rocky]

It's been a long time since I've posted, but I've come up with a helpful tip while helping a friend develop a PrestaShop 9 website.

I came up with a free way to embed responsive videos in product descriptions and any other HTML fields on the website.

1. Enable the "Allow iframes on HTML fields" option (if it's disabled) on the "Shop Parameters > General" tab in the Back Office.
2. Create a child theme (if you haven't already) to enable custom CSS to be added.
3. Add the following to the themes/child_theme/assets/css/custom.css (this code makes the YouTube video responsive so it looks good on desktop, tablet and mobile):

   .embed-container {
   	position: relative;
   	padding-bottom: 56.25%;
   	height: 0;
   	overflow: hidden;
   	max-width: 100%;
   	margin-bottom: 1rem;
   }
   
   .embed-container iframe {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   }

4. Upload the video to YouTube and choose either "Public" or "Unlisted" depending on whether you want the video searchable on your channel.
5. Click the "Share" button on the video and then choose "Embed". Copy the <iframe> code to the product description or other HTML field in the Back Office and then add <p class="embed-container"> before the <iframe> code and </p> after the </iframe> code.

I hope this helps someone.

Edited Thursday at 01:07 PM by rocky (see edit history)