How to embed a video on your product page

In this article, we will add a video and make it responsive for your product page.

 

Step 1 - Add an accordion on your Product page

How to embed a video on your product page 1

 

 

Step 2 - Set it at Custom content

How to embed a video on your product page 2

 

 

Step 3 - Copy/Paste the iframe-container div

Copy/paste the following code and add it to your custom content:

<div class="iframe-container"> 

</div>

How to embed a video on your product page 3

Step 4 - Copy/Paste your video embed code

After doing so, time to get your video embed code:

Copy your youtube video embed code, here is a tutorial. How to embed a video on your product page 4

How to embed a video on your product page 5

 

Step 5 - Make the video responsive

It's time to insert the Custom CSS in your theme settings now. Copy-paste the CSS below:

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

How to embed a video on your product page 6

 

Final result

After doing all the implementation of the code, here's the final result:

How to embed a video on your product page 7