---
title: Embedding a video on your product page
description: How to embed a video on your product page
---
[Skip to content](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#main-content)
![logo_white_booster-Sep-13-2022-06-54-02-62-PM.png\]](https://help.boostertheme.com/hs-fs/hubfs/logo_white_booster-Sep-13-2022-06-54-02-62-PM.png?height=36&name=logo_white_booster-Sep-13-2022-06-54-02-62-PM.png)
- [Home - Help Center](https://help.boostertheme.com/knowledge)
Open main navigation
Close main navigation
- [Home - Help Center](https://help.boostertheme.com/knowledge)
- [Go to boostertheme.com](https://boostertheme.com/)
[Go to boostertheme.com](https://boostertheme.com/?hsLang=en)
Hello. How can we help you?
- There are no suggestions because the search field is empty.
1. [Home - Help Center](https://help.boostertheme.com/knowledge?hsLang=en)
2. [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en)
3. [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page)
# Embedding a video on your product page
## How to embed a video on your product page
#### [](https://help.boostertheme.com/hubfs/embed%20video%20product.png?hsLang=en)
Embedding videos on product pages is essential in e-commerce as it enhances comprehension, boosts user engagement, fosters trust, improves search engine optimization (SEO), caters to mobile users, and effectively manages customer expectations. It is a strategic approach to enriching the overall customer experience and driving higher conversion rates.
#### In this article:
1. [Product page blocks used to add video](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Product-page-blocks-used-to-add-video)
2. [Step 1 - Add an accordion on your Product page](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Add-an-accordion-on-your-Product-page)
3. [Step 2 - Set it at Custom content](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Set-it-at-Custom-content)
4. [Step 3 - Copy/Paste the iframe-container div](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Copy-Paste-the-iframe-container-div)
5. [Step 4 - Copy/Paste your video embed code](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Copy-Paste-your-video-embed-code)
6. [Step 5 - Make the video responsive](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Make-the-video-responsive)
7. [Final result](https://help.boostertheme.com/knowledge/how-to-embed-a-video-on-your-product-page#Final-result)
---
Throughout this article, we will guide you on how to seamlessly incorporate a video into your product page while ensuring it is responsive. This step-by-step process will enable you to enhance the overall user experience and drive higher conversion rates.
#### Product page blocks used to add video
To enhance your product page with videos, you can utilize the "Accordion" and "Tab" blocks. These blocks offer a seamless method for incorporating videos using the custom content option.
Additionally, we recommend checking out our comprehensive tutorial on [how to add product-specific content using Metafields](https://help.boostertheme.com/knowledge/how-to-add-product-specific-content-using-metafields?hsLang=en). This tutorial provides detailed instructions and guidance on how to enhance your product pages with customized content.
#### 
To showcase how to add a video to your product page, we will utilize the accordion block. Simply follow the detailed steps below to incorporate videos seamlessly.
#### **Step 1 - Add an accordion on your Product page**
#### Step 2 - Set it at Custom content
****
#### Step 3 - Copy/Paste the iframe-container div
Copy/paste the following code and add it to your custom content:
```
```
#### **Step 4 - Copy/Paste your video embed code**
Once you have completed the previous steps, it is time to obtain your video embed code. You can copy the embed code for your YouTube video by following [this helpful tutorial](https://support.google.com/youtube/answer/171780?hl=en). 
#### **Step 5 - Make the video responsive**
Next, you will need to add the following Custom CSS code into your theme settings. Copy and paste in Theme settings > Advanced HTML and CSS > Custom CSS:
```
.iframe-container {overflow: hidden;/* 16:9 aspect ratio */padding-top: 56.25%;position: relative;}.iframe-container iframe {border: 0;height: 100%;left: 0;position: absolute;top: 0;width: 100%;}
```
By following these steps, you will ensure that the CSS code is correctly implemented and will achieve the desired result.
#### **Final result**
After doing all the implementation of the code, here's the final result:
#### 
*- End of the article -*
- [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en#main-content)
- [Installation Process](https://help.boostertheme.com/knowledge/get-started?hsLang=en#installation-process)
- [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics)
- [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#main-content)
- [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections)
- [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings)
- [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page)
- [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials)
- [More support](https://help.boostertheme.com/knowledge/more-support?hsLang=en#main-content)
- [Partners app Ressource center](https://help.boostertheme.com/knowledge/more-support?hsLang=en#partners-app-ressource-center)
- [Managing your subscription & theme](https://help.boostertheme.com/knowledge/more-support?hsLang=en#managing-your-subscription-theme)
- [Change logs & Policies](https://help.boostertheme.com/knowledge/more-support?hsLang=en#change-logs-policies)
- [Announcements and others](https://help.boostertheme.com/knowledge/more-support?hsLang=en#announcements-and-others)
[](https://boostertheme.com/?hsLang=en)
Copyright © 2026, Booster Theme - PreviewX Inc.