Easily Embed Responsive YouTube Videos in PrestaShop Product Descriptions

Make Your PrestaShop Product Pages Engaging with Responsive YouTube Videos

Want to enhance your PrestaShop product pages with engaging video content? Embedding YouTube videos directly into your product descriptions is a great way to showcase your products and boost conversions. This guide, inspired by a helpful tip from the PrestaShop forums, provides a simple and effective method for embedding responsive YouTube videos that look great on any device.

Enabling iFrames and Adding Custom CSS

The core of this technique involves enabling iFrames in your PrestaShop back office and adding custom CSS to ensure the videos are responsive. Here's a step-by-step breakdown:

1. Enable iFrames: Navigate to "Shop Parameters > General" in your PrestaShop back office and enable the "Allow iframes on HTML fields" option. This is crucial for embedding the YouTube video.
2. Create a Child Theme: If you haven't already, create a child theme. This allows you to make customizations without directly modifying the core PrestaShop files, ensuring your changes are preserved during updates.
3. Add Custom CSS: Add the following CSS code to your child theme's custom.css file (located in themes/child_theme/assets/css/custom.css). This CSS will make your embedded YouTube videos responsive:

.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%;
}

This CSS code creates a container with a specific aspect ratio (16:9, hence the 56.25% padding-bottom) and ensures that the iFrame fills the container responsively.

Embedding the YouTube Video

Now that you've set up the CSS, you can embed the YouTube video into your product description:

1. Upload to YouTube: Upload your video to YouTube and choose either "Public" or "Unlisted" depending on your preference.
2. Get the Embed Code: Click the "Share" button on the video and then choose "Embed". Copy the code.

For example:

Replace YOUR_VIDEO_ID with the actual ID of your YouTube video.

Conclusion

By following these steps, you can easily embed responsive YouTube videos into your PrestaShop product descriptions and other HTML fields, creating a more engaging and informative shopping experience for your customers. This simple technique can significantly enhance your product presentation and potentially increase sales.